blog nofutur3 » javascript http://www.n3b.cz ... o webdesignu a jiných slastech informačních technologií Wed, 01 Feb 2012 19:06:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 LightBox2 – použití http://www.n3b.cz/lightbox2-pouziti/ http://www.n3b.cz/lightbox2-pouziti/#comments Thu, 19 Mar 2009 18:11:21 +0000 admin http://blog.nofutur3.org/?p=779 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;
]]> http://www.n3b.cz/lightbox2-pouziti/feed/ 1