LightBox2 – použití » blog nofutur3

LightBox2 – použití

19. 3. 2009 / 19:11 — 772 shlédnutí
V kategorii javascript

LightBox2 je asi nezjnámější skript na zobrazování obrázků. Asi to znáte všichni – vidíte nějakou fotku na webu, kliknete na ní a vše kolem ztmavne, uprostřed obrazovky vyjede nějaký progresbar a když se fotka načte, tak se tam otevře. V případě prohlížení galerií máte také možnost lehce přejít na další fotku. Takže prvně si stáhněte LightBox2. Archív rozbalte do rootu webu, vytvoří to docela rozumnou adresářovou strukturu: /js pro skripty; /css pro styly /images pro obrázky. Můžete samozřejmě použít jinou, jen upravíte cesty. Archív obsahuje i index.html, což je soubor, který pravděpodobně nebude potřebovat. Dávejte si pozor, ať si s ním nepřepíšete vámi vytvořený index.html.

Načtení LightBox2

Mezi tagy <head></head> vložíme (načtení javascriptů):

&lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/lightbox.js"&gt;&lt;/script&gt;

Dále ještě zalinkujeme (stejné místo) soubor se styly pro LightBox2:

&lt;link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /&gt;

Použití

Do odkazu, kde chceme využít LightBox2 vložíme rel=lightbox. Příklad:

&lt;a href="images/gallery/photo.jpg" rel="lightbox" title="tohle bude popisek"&gt;obrazek 1&lt;/a&gt;

Pokud nechcete zobrazovat popisek, title můžete vynechat. Chcete-li zobrazit galerii nebo prostě více fotek, mezi kterými lze posléze snadno přepínat, jedinou změna bude v rel, použijete něco jako rel=“lightbox[nazev-galerie]„. Pro všechny obrázky z jedné galerie použijte mezi znaky [] stejné slovo. Příklad:

&lt;a href="images/gallery/photo1.jpg" rel="lightbox[test]" title="tohle bude popisek"&gt;obrazek 1&lt;/a&gt;
&lt;a href="images/gallery/photo2.jpg" rel="lightbox[test]" title="tohle bude popisek"&gt;obrazek 2&lt;/a&gt;

Sdílejte: