jquery - 缩略图到图像交换 onclick

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

Offtopic:始终尝试在要从 jquery 引用的元素上使用 id，它会显着提高性能。

但是，你问的我会这样做......

标记:

 <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...