ShowBox - vlastní lightbox efekt - Javascript - Tvorba WWW

Nyní jste zde: Erblog > Tvorba WWW > Javascript > ShowBox - vlastní lightbox efekt

ShowBox - vlastní lightbox efekt

Jak to vypadá?

Takhle. Klikněte na libovolný obrázek.

Pravidla pro použití

Ještě než začneme, rád bych upozornil na pár podmínek či doporučení při použití mého ShowBoxu.

Podmínka: Pokud to není nutné, neměňte nic v kódu. (Drobným modifikacím se nebráním).
Přísná podmínka: Neodstraňujte autorský text v komentech v kódu.
Doporučuji : Pokud používáte jakýkoliv můj skript či výtvor, byl bych rád kdybyste si přidali ikonku mého erblogu na web.

Download

Soubor sbx.zip ..... 689,21 kB

Jak sprovoznit ShowBox

Nejprve si stáhněte soubor sbx.zip a poté ho rozbalte do kořenového adresáře vašeho webu. Přibyly vám celkem 3 složky a 1 soubor. Soubor showbox.html je pouze příklad pro případ, že něco budete chtít vidět detailně. Až integrování ShowBoxu dokončíme, můžete tento soubor smazat. Ve složce miniatury se nyní nachází 3 miniatury k příkladu a ve složce obrázky se nachází jejich zvětšeniny. - tyto obrázky po dokončení můžeme též smazat.

Teď si přilinkujeme do stránky, která bude obsahovat ShowBox, script a styly. Tyto dva řádky přijdou do elementu


<link rel="stylesheet" href="showbox/showbox.css" />
<script language="javascript" type="text/javascript" src="showbox/showbox.js"></script>

Do té samé stránky si na konec dokumentu, před značku přidáme:


<div id="loader"></div>

Tímto máme integrovaný ShowBox. Nyní se naučíme vytvářet galerie fotek či obrázků s jeho pomocí.

Vlastně je to jednoduché. Nejprve si připravíme obrázky. Do složky 'miniatury' dáme zmenšeniny obrázků, které budou v galerii a to tak aby měly stejný název jako originály + s předponou 'mini_'. Například pro obrázek s názvem 'obr1.jpg' by se jeho miniatura měla jmenovat 'mini_obr1.jpg'. Pokud máme více obrázků tak hromadné zmenšení lze udělat např. v programu Zoner Photo Studio, a hromadné přejmenování lze snadno udělat například v Total Commanderu (do pole 'Maska pro přejmenování' napíšete toto: 'mini_[N]'. No a nebo je můžete přejmenovat ručně. Dále do složky 'obrazky' dáme zvětšeniny těch obrázků. Doporučuji max. rozlišení 640x480- Stačí to na to aby se člověk pokochal obrázkem, nenačítá se to dlouho a nemusí se při zobrazení scrollovat.

Tak. pokud máme miniatury a obrázky v příslušných složkách, vytvoříme galerii a to tak že do kódu, tam kde tu galerii chcem mít přidáme toto:


<script type="text/javascript">
	pictures = makeArray(
'nazev-prvniho-obrazku.jpg', 320, 240, 'text k prvnímu obrázku', 
'nazev-dalsiho-obrazku.jpg', 640, 480, 'text k dalšímu obrázku',
'nazev-jeste-dalsiho-obrazku.jpg', 640, 480, 'text k ještě dalšímu obrázku'
	);
   createPhotoShow(pictures, 2, 150, 115);
</script>

Do funkce makeArray() zadáváme parametry v tomto pořadí(parametry oddělujeme čárkou a text dáváme do apostrofů nebo uvozovek):

název obrázku.jpg(gif/png) - povinný parametr
jeho šířka - smíme vynechat pouze pokud vynecháme i výšku
jeho výška - pokud vynecháme výšku i šířku - defaultně se nastaví 640x480
jeho alt - popis - povinný parametr
a zase dokola - název, šířka, výška, popis - tolikrát, z kolika obrázků bude galerie..

U funkce createPhotoShow ty parametry znamenají

pictures - neměnný parametr - ponechte ho takto
2 - počet miniatur na řádek, nastavte dle libosti (klidně 20 chcete-li)
150 - šířka miniatur, nastavte dle libosti (nedoporučoval bych více jak 200)
115 - výška miniatur, nastavte dle libosti (nedoporučoval bych více jak 200)

No a teď už stačí jen stránku uložit. Pro větší představu se podívejte na zdrojový kód souboru showbox.html. Bude vám vše jasnější. V případě jakýchkoliv problémů mi klidně napište sem do komentářů nebo na icq(228-563-099).

Dodatek: zobrazované miniatury je možné dále stylovat. Mají přednastavenou třídu s názvem 'immo' (class='immo'). Doporučuji použít aspoň margin-left.

Napsal Eric Force dne 29.08.2009 | Náleží do kategorie Tvorba WWW

Líbil se vám článek?

Pokud ano, dejte vědět dalším. K dispozici máte facebook, linkuj nebo twitter.