Efektní zobrazení obrázků
Javascriptové aplikace, které vám umožní otevírat obrázky na vašem webu do „překryvného okna“ s tmavým pozadím, se již stali nezbytnou pomůckou mnoha tvůrců. Klinete na miniaturu obrázku a místo otevření do nového (nebo do stejného) okna se dočkáte hezké animace při otevírání. Jediným kliknutí pak obrázek zavřete.
Je to pohodlné, uživatele to nezdržuje, vypadá to profesionálně. Na této stránce si představíme řešení s názvem Slimbox. Patří k těm jednodušším, ale bezproblémovým ve všech nejpoužívanějších prohlížečích.
Stáhnout si ho můžete na oficiálním webu.
Použití – implementace
Stažený archiv rozbalte a složku nahrajte do prostoru svého webu. Do hlavičky stránky, kde má slimbox fungovat, vložte tyto řádky:
<link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="slimbox/js/mootools.js"></script>
<script type="text/javascript" src="slimbox/js/slimbox.js"></script>
Adresy pochopitelně musí odpovídat a vést ke konkrétním souborům.
Zápis obrázku
Z předchozí kapitoly již znáte zápis obrázku – zmenšeniny odkazující na originál. Nyní bude vypadat téměř stejně, pro použití slimboxu je potřeba přidat pouze jeden atribut:
<a href="fotka.jpg" rel="lightbox" alt="Fotka"><img src="malafotka.jpg" alt="Fotka malá"></a>
Na výsledek se můžete podívat na oficiálním webu – demo Slimboxu
Autor: Luboš Kudláček
Provozovatel Netzinu, autor knihy o WordPressu, publicista, blogger. Více na LubosKudlacek.cz
