Jak zprovoznit Lightbox 2.6.
Funkce Lightbox je stále více oblíbená, jelikož to co řeší, mnohdy usnadní mnoho práce pro tvůrce webů, konkrétně při tvoření galerií. Lightbox totiž vytváří prezentaci obrázků, na které vede odkaz z náhledů. V tomto článku sepíši návod, jak Lightbox verze 2.6 zprovoznit pro vaše WWW stránky.
V prvé řadě si připravíme potřebné soubory. Bude to knihovna jQuery, poté soubor samotného Lightboxu, soubor kaskádových stylů a pár obrázků. Javascriptové knihovny můžeme implementovat dvojím způsobem. První je klasické nahrání na vlastní webhosting a odkazovat se na ně, nebo (za druhé) je možné využít API různých internetových společností. Jako například Google Code centrum. Využití druhého způsobu je vhodné pro zvýšení rychlosti při načítání stránek. V návodu použiji první způsob, kdy soubory vlastníme a máme je nahrané. Přihlášení uživatelé si balíček veškerých potřebných souborů mohou stáhnout s odkazu pod tímto článkem. Anglické fráze pro galerii jsou v této verzi přeložené do českého jazyka. A nyní jednoduché kroky pro zprovoznění.
1. Vytvoříme si složky img a js přímo v základní složce webu (Tam kde se většinou nachází soubor index)
2. Soubory s přípomou *.js nahrajeme do složky js, soubory obrázků do složky img a soubor CSS do základní složky webu.
3. Vložíme následující kód do hlavičky webu, tedy mezi tagy <HEAD>. Toto není povinné, propojení kaskádových stylů nebo javascruptu lze provádět v jakékoliv části webu, však kód pak nemusí být brán jako validní.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox.css">
4. Upravíme html kód tak, aby se Lightbox aktivoval při náhledu obrázku.
<a href="odkaz na obrázek plné kvality" data-lightbox="image-1" title="popis obrázku"><img src="náhledový obrázek"></a>
Česká verze Lightbox 2.6 ke stažení:
[protected]lightbox.2.6.zip(47 kB)[/protected]
Propojení s Lightboxem provádí atribut data-lightbox s parametrem image-1 v odkazu (a). Pokud takovýchto odkazů bude na jedné stránce víc, automaticky je možnost se mezi nimi přepínat, buď pomocí kliknutí nebo pomocí šipek. Jestliže máte na stránce skupiny obrázků, použijte rozdílně parametry pro každou skupinu, tedy například data-lightbox=”prvniskupina” a data-lightbox=”druhaskupina”.
Pro náhled použijte oficiální stránky Lightbox (anglicky)