Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




Lightbox - fotogalerie

Co budeme potřebovat

Na jQuery lightbox budeme potřebovat samozřejmě jQuery knihovnu, dále js soubor s lightboxem, soubor s CSS stylovávím a několik obrázků. Potřebné soubory stáhneme zde. Nalinkovat to můžeme třeba takto:

<script  type="text/javascript" charset="UTF-8" src="/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Jak vytvoříme fotogalerii

Struktura fotogaleri vypadá přibližně takto:

<div id="fotogalerie">
     <ul>
          <li>
               <a href="/img/obrazek1.jpg" title="Obrázek 1">
                    <img src="/img/nahled_obrazku1.jpg" alt="Obrázek 1" width="200" height="100">
               </a>
          </li>
          <li>
               <a href="/img/obrazek2.jpg" title="Obrázek 2">
                    <img src="/img/nahled_obrazku2.jpg" alt="Obrázek 2" width="200" height="100">
               </a>
          </li>
          <li>
               <a href="/img/obrazek3.jpg" title="Obrázek 3">
                    <img src="/img/nahled_obrazku3.jpg" alt="Obrázek 3" width="200" height="100">
               </a>
          </li>
     </ul>
</div>

Celá galerie je v divu, v kterém je seznam, ve kterém je v každé položce odkaz na velký obrázek, který obsahuje malý obrázek.

jQuery část

Do jQuery části napíšeme na zprovoznění galerie toto:

$(document).ready(function(){
     $('#fotogalerie a').lightBox();
});

Ukázku najdete tady v záložce "example".

Zdroje:

http://leandrovieira.com/projects/jquery/lightbox/

Zobrazit diskuzi