Prosta przeglądarka zdjęć w jQuery – wykorzystanie metody .each()

Przedstawię sposób użycia metody .each() na przykładzie prostej przeglądarki zdjęć. Przeglądarka ta jest naprawdę prymitywna i nie powinna być wykorzystywana w większych projektach.

Zacznijmy od podstawowej struktury HTML:

<div id="images">
 <img src="http://lorempixel.com/400/200/sports/1/"
      alt="" data-idi="a1" />
 <img src="http://lorempixel.com/400/200/sports/2/"
      alt="" data-idi="a2" />
 <img src="http://lorempixel.com/400/200/sports/3/"
      alt="" data-idi="a3" />
 <img src="http://lorempixel.com/400/200/sports/4/"
      alt="" data-idi="a4" />
</div>
<div id="thumbs">
 <button data-idb="a1">
  <img src="http://lorempixel.com/50/50/sports/1/" alt="" />
 </button>
 <button data-idb="a2">
  <img src="http://lorempixel.com/50/50/sports/2/" alt="" />
 </button>
 <button data-idb="a3">
  <img src="http://lorempixel.com/50/50/sports/3/" alt="" />
 </button>
 <button data-idb="a4">
  <img src="http://lorempixel.com/50/50/sports/4/" alt="" />
 </button>
</div>

Powyższy kod wyświetli 4 zdjęcia wraz z miniaturkami pod nimi. Struktura nie wymaga żadnych wyjaśnień, poza użyciem własnych atrybutów data-*, łączących miniaturki z odpowadającymi im zdjęciami.
Strona jest oczywiścia statyczna, więc dodajmy trochę kodu JavaScript, zaraz przed zamknięciem tagu </body>:

<script src=
  "//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
  (function($) {
    $('#images img').hide();
    $('#images img').first().show();
    $('#thumbs button').on( "mouseover", function(e) {
      var idb = $(this).data("idb");
      $('#images img').hide();
      $('#images').find("[data-idi='" + idb + "']").show();
    });
  })(jQuery);
</script>

Krótkie objaśnienie powyższego skryptu:

  • 4. linijka ukrywa wszystkie obrazki z diva o id #images
  • 5. linijka pokazuje pierwszy obrazek w divie o id #images
  • 6. linijka wywołuje anonimową funkcję zwrotną dla zdarzenia onmouseover dla buttonów w divie o id #thumbs
  • w funkcji tej tworzona jest zmienna idb, która przechowuje id przycisku dla którego wystąpiło zdarzenie onmouseover; id jest pobierane z atrybutu data-idb
  • następnie ponownie chowane są wszystkie obrazki
  • po czym pokazywany jest obrazek odpowiadający klikniętej miniaturce

Okay, strona zyskała na dynamiźmie – teraz najeżdżając na miniaturkę zmiania się duże zdjęcie powyżej.

Ale załóżmy, że chcemy dodać kilka zbiorów takich obrazków wraz z miniaturkami. Rozbudujmy zatem HTML:

<div class="thumbs" data-set="1">
  <button data-idb="a1">
    <img src="http://lorempixel.com/50/50/sports/1/" alt="" />
  </button>
  <button data-idb="a2">
    <img src="http://lorempixel.com/50/50/sports/2/" alt="" />
  </button>
  <button data-idb="a3">
    <img src="http://lorempixel.com/50/50/sports/3/" alt="" />
  </button>
  <button data-idb="a4">
    <img src="http://lorempixel.com/50/50/sports/4/" alt="" />
  </button>
</div>
<div class="images" data-set="2">
  <img src="http://lorempixel.com/400/200/people/1/"
       alt="" data-idi="b1" />
  <img src="http://lorempixel.com/400/200/people/2/"
       alt="" data-idi="b2" />
  <img src="http://lorempixel.com/400/200/people/3/"
       alt="" data-idi="b3" />
  <img src="http://lorempixel.com/400/200/people/4/"
       alt="" data-idi="b4" />
</div>
<div class="thumbs" data-set="2">
  <button data-idb="b1">
    <img src="http://lorempixel.com/50/50/people/1/" alt="" />
  </button>
  <button data-idb="b2">
    <img src="http://lorempixel.com/50/50/people/2/" alt="" />
  </button>
  <button data-idb="b3">
    <img src="http://lorempixel.com/50/50/people/3/" alt="" />
  </button>
  <button data-idb="b4">
    <img src="http://lorempixel.com/50/50/people/4/" alt="" />
  </button>
</div>

Rozbudowania wymaga także skrypt JS:

<script type="text/javascript">
(function() {
  var imgs = $('.images');
  $('.images img').hide()
  $.each(imgs, function(index, val) {
     $(val).children(":first").show();
     $('.thumbs button').on( "mouseover", function(e) {
         var idb = $(this).data("idb"),
            set = $(this).parent().data("set");
         $('body').find("[data-set='" + set + "']").
                                  children("img").hide();
         $('.images').find("[data-idi='" + idb + "']").
                                                  show();
     });
  });
})();
</script>

Funkcja .each()przyjmuje dwa argumenty:

  1. Tablicę elementów, na których wykonywana jest jakaś operacja
  2. Funkcja wywoływana dla każdego elementu tablicy

Anonimowa funkcja wywołana jako drugi argument metody .each() przyjmuje dwa argumenty klucz oraz wartość — odpwowiadające kolejnym elementom tablicy.

Na początku skryptu, w linii 4., ukryto wszystkie duże obrazki. Linia 6. pokazuje pierwsze duże zdjęcie dla każdego zestawu zdjęć.
Następnie, podobnie jak w pierwszym przypadku, wywoływane jest zdarzenie onmouseover, z tą różnicą, że za pomocą zmiennej set odpowiadającej atrybutowi data-set odróżniony zostaje dodatkowo zestaw zdjęć.

Działający przykład na JS Bin.

Tak jak napisałem wcześniej, taki skrypt nie powinien być jednak używany w większych projektach, gdzie występuje duża ilość elementów.
W powyższym przykładzie wszystkie zdjęcia są ładowane i wyświetlane, dopiero działanie skryptu JS powoduje ich ukrycie. W przypadku większej ilości obrazków takie rozwiązanie byłoby nieoptymalne i powodowałoby długie wczytywanie się strony. Zamiast tego należałoby użyć asynchronicznych wywołań AJAX dla ładowania dużych zdjęć.

SKOMENTUJ