Question

我有多个使用以下代码的图片库（只需在以下链接中查看演示）。

但是，当您点击一个图库的缩略图来更改大图像预览时 - 所有图库也会自动更改为该大型预览。

简而言之，问题是：

“如何将每个图库彼此分开，以便当用户点击某个特定图库的缩略图时，该图库的大图像预览会发生变化，而不会发生任何变化？”

JavaScript：

$("ul.thumb li a", $(".item")).click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img", $(".item")).attr({ src: mainImage });
    return false;       
});

}）;

HTML：

<div class="item">
   <h2>The Money Growing Door</h2>
   <div id="main_view">
     <img src="images/1.jpg" class="uks" alt="#" />
   </div>
   <ul class="thumb">
     <li><a href="images/1.jpg"><img src="images/colours/sinine.png" alt="#" /></a></li>
     <li><a href="images/3.jpg"><img src="images/colours/must.png" alt="#" /></a></li>
     <li><a href="images/1.jpg"><img src="images/colours/valge.png" alt="#" /></a></li>
   </ul>
</div>

基本上，我重复了代码中所见的HTML和Javascript： http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ 只有我在同一页面上有多个画廊。

Answer 1

基本上，我重复相同的HTML和在代码中看到的Javascript： http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ 只有我有多个画廊同一页。

所以我认为你有很多<ul class="thumb"> ??

如果是，请尝试

$("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $(this).closest('.item').find("#main_view img").attr({ src: mainImage });
    return false;       
});

quick demo

如何在同一页面上安装多个jQuery图像交换图库？

1 个答案: