• címkék:
  • slider
  • bélyegkép
  • galéria
  • slideshow
  • előnézet
  • kép

Sweet Thumbnails Preview Gallery

Példa

HTML kód

A struktúra kötött, a helyes működéshez a lenti példát kell követni!

A plugin-hoz használható loader, ehhez még a galéria blokkja előtt egy üres div-et kell létrehoznunk (1. sor).
Ugyanígy a navigációs gombok is külön blokkokat igényelnek (.ps_next és .ps_prev), ezek elhagyásával a funkció természetesen "letiltható".

Külön kiemelném a 3. sort, ahol az elsőként megjelenítendő képet kell elhelyeznünk, ugyanis a HTML kódot jobban megfigyelve észrevehetjük, hogy a szokásostól eltérően itt a galéria elemeit nem linkekbe ágyazott képek alkotják, hanem csak sima linkek, melyek href attribútuma a nagy képet, a rel attribútuma pedig a bélyegképet tartalmazza:

        <div id="loader" class="loader"></div>
        <div id="ps_container" class="ps_container">
          <div class="ps_image_wrapper"><img src="images/img1.jpg" alt="" /></div>
          <div class="ps_next"></div>
          <div class="ps_prev"></div>
          <ul class="ps_nav">
            <li class="selected"><a href="images/img1.jpg" rel="images/thumb-1.jpg">Kép 1</a></li>
            <li><a href="images/img2.jpg" rel="images/thumb-2.jpg">Kép 2</a></li>
            <li><a href="images/img3.jpg" rel="images/thumb-3.jpg">Kép 3</a></li>
            <li><a href="images/img4.jpg" rel="images/thumb-4.jpg">Kép 4</a></li>
            <li><a href="images/img5.jpg" rel="images/thumb-5.jpg">Kép 5</a></li>
            <li class="ps_preview">
              <div class="ps_preview_wrapper"></div>
              <span></span>
            </li>
          </ul>
        </div>
      

« bezár