Миниатюра к изображению поменять местами

Question

Я пытаюсь разобраться с простой галереей изображений.

У меня есть большое изображение в центре и две миниатюры, одна вверху слева и одна внизу справа.

<div class="images_gallery">
    <div class="small_top_left thumbnail"> <a href="#triggerlarge"></a><img src="small_top_A.jpg"/></div>

        <div class="large middle visible"><img src="large_imageC.jpg"></div>
        <div class="large middle hidden"><img src="large_imageA.jpg"></div>
        <div class="large middle hidden"><img src="large_imageB.jpg"></div>

    <div class="small_bottom_right thumbnail"> <a href="#triggerlarge"></a><img src="small_bottom_B.jpg"/></div>    
</div>  

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

Спасибо за любую помощь.

Answer 1

Оффтоп: всегда старайтесь использовать идентификаторы для элементов, на которые вы хотите ссылаться из jquery, это значительно повышает производительность.

Но, что вы спрашивали, я бы сделал это так ...

разметка:

 <div id="images_gallery">
  <div class="small_top_left thumbnail"><img src="small_A.jpg" data-image='A'/></div>

    <div class="large middle"><img src="large_imageC.jpg" data-image='C'></div>
 <div class="small_bottom_right thumbnail"> <img src="small_B.jpg" data-image='B'/></div>
 </div>

js:

 $(document).ready(function() {

     $("#images_gallery .thumbnail img").click(function() {

          var next_data = $("#images_gallery .large img").attr('data-image');
          var next_thumb = "small_" + next_data + ".jpg";

          var large_data = $(this).attr("data-image");
          var large = "large_image"+ large_data +".jpg";

          $("#images_gallery .large img").attr('src', large).attr('data-image', large_data);
          $(this).attr('src', next_thumb).attr('data-image', next_data); 
     });


});

Вызов изображений small_A.jpg, small_B.jpg, small_C.jpg, и large_image_A.jpg ...