Несколько картинных галерей на одной странице

Question

Не могли бы вы помочь использовать несколько галерей изображений на моей странице на основе кода ниже. Он отлично работает, если на странице находится только одна галерея, в другом случае мне нужно скопировать код два раза и предоставить разные идентификаторы элементам. Я считаю, что есть гораздо лучшее решение.

Заранее спасибо.

HTML

<div class="img"> 
    <div class="image"> 
     <img src="images/1.png"> 
     <img src="images/2.png"> 
     <img src="images/3.png"> 
    </div> 
    <div class="thumbnail"> 
     <img src="images/1_tb.png"> 
     <img src="images/2_tb.png"> 
     <img src="images/3_tb.png"> 
    </div> 
</div> 
<div class="img"> 
    <div class="image"> 
     <img src="images/1.png"> 
     <img src="images/2.png"> 
     <img src="images/3.png"> 
    </div> 
    <div class="thumbnail"> 
     <img src="images/1_tb.png"> 
     <img src="images/2_tb.png"> 
     <img src="images/3_tb.png"> 
    </div> 
</div> 

JQuery

$(function(){ 
$(".image img:eq(0)").nextAll().hide(); 
$(".thumbnail img").click(function(e){ 
     var $this = $(this), 
     index = $this.index(); 
    $(".image img").eq(index).show().siblings().hide(); 
}); 
}); 

Answer 1

Идея состоит в том, чтобы обрабатывать галереи, изменяя что-то только в галерее, где размещается эскиз, используя, например, .closest(), чтобы найти галерею главной оберткой:

Fiddle.

JS:

$(function() 
{ 
    $(".image").each(function() 
    { 
     $(this).find('img:not(:first)').hide(); 
    }); 

    $(".thumbnail img").on("click", function() 
    { 
     var $this = $(this); 
     var index = $this.index(); 
     var gallery = $this.closest('.img'); 
     gallery.find(".image img").eq(index).show().siblings().hide(); 
    }); 
}); 

Answer 2

Как можно заметить, выбирая по имени класса будет найти все уточняющие элементы в DOM. Следовательно, ваша галерея не зависит друг от друга.

Вам нужен механизм для ограничения выбора в каждой конкретной галерее.

Ваш код может быть переработан как плагин JQuery ...

//jQuery plugin 
$.fn.myGallery = function() { 
    this.each(function(i, gallery) { 
     $(".image img:eq(0)", gallery).nextAll().hide(); 
     $(".thumbnail img", gallery).click(function(e) { 
      $(".image img", gallery).eq($(this).index()).show().siblings().hide(); 
     }); 
    }); 
} 

... и ссылаться на все контейнеры с class == "img"

$(".img").myGallery(); 

Лично я хотел бы изменить Classname "IMG" в «галерея» и вызвать плагин с:

$(".gallery").myGallery();