Előugró ablakok
A JoomlaWiki wikiből
A felugró képek nagyon népszerűek manapság a weboldalakon. Főképpen galériákban látható, de egyre gyakoribbak a cikkekben is. A Joomla! 1.5-ben egyszerűen készíthetünk felugró képeket.
Az első tennivalónk elhelyezni a következő kódot a sablon index.php fájljába.
Egészen a tetejére kell helyezni minden html tag elé. Mindössze ennyi programozási tudásra van szükség. A felugró effektus aktiválásához, győződjünk meg róla, hogy ez a kód szerepel a sablon index.php fájljában a DOCTYPE tag előtt:
<?php JHTML::_( 'behavior.modal' ); ?>
Ezután készítsük el a hivatkozást a cikkben:
<a class="modal" href="/images/stories/big_picture.jpg"><img src="/images/stories/thumb_picture.jpg" border="0" alt="A picture" /></a>
Három dolgot kell megjegyeznünk:
- A kicsinyített képet tegyük a hivatkozásba.
- A teljes méretű képre hivatkozzunk.
- A hivatkozáshoz adjuk hozzá a modal class-t.
A következő alkalommal egy másik technikát fogok bemutatni, amelynek a neve Slimbox. Ez egy kicsit jobban néz ki, támogatja a galériákat és kevesebb erőforrást vesz igánybe. Hogyan működik?
A modal működése javascript alapú, amely végignézi az oldal forrását és megkeresi az összes olyan hivatkozást, amely modal class-t tartalmaz. Ezután egy eljárást társít hozzá, amely megjelenteti a felugró képet. Egy nagy előnye ennek, hogy akkor is megjelenteti a képet, ha a javascript nem engedélyezett. Szabványos kódot készít és a hivatkozásra kattintva megjelenik a teljes méretű kép. Az ugyan lehetséges, hogy nagyobb a kép mint a képernyő, de ez egy másik probléma és a lényeg, hogy a látogató megkapja az információt.
A cikk forrása: The Art of Joomla!
