JavaScript Logo

Při vytváření designových webových stránek musíme dbát i na způsob prezentace obrázků. Samozřejmě, že na kódovat fotogalerii, není složité. Však proč vytvářet něco, co už je vytvořené. Již dlouhou dobu na internetu je zdarma k dispozici knihovna, která nám zaručí přívětivé zobrazení obrázků a také dá k dispozici prezentaci. Nazývá se LightBox, jedná se o kombinaci jQuery a klasického JS. Tato knihovna se stala velmi oblíbenou jak pro svoji funkcionalitu, tak pro jednoduchou implementaci na webové stránky. Popis, který naleznete níže, obsahuje čtyři krátké kroky ke sprovoznení LightBoxu verze 2.

LightBox Logo

1. Musíme stáhnout potřebné knihovny.
2. Nahrajeme potřebné soubory na webhosting našich stránek. Předtím si připravíme složky JS a CSS a IMG. Do složky JS vložíme “jquery-1.11.0.min.js a lightbox.min.js“. Do složky CSS vložíme “lightbox.css” a do složky IMG “close.png, loading.gif, prev.png, a next.png“
3. Dále musíme vložit do hlavičky webu propojení s nahranými soubory.
   <script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" /></code>
4. A naposledy postačí odkazy na obrázky upravit. Do tagu A vložíme následující atribut “data-lightbox=’skupina-1′”. Výsledný odkaz tedy vypadá takto:
   <a href="img/image-1.jpg" data-lightbox="skupina-1" data-title="Muj popisek">Image #1</a>