Question

如果您翻转缩略图，我有一个主图像，每次加载一个不同的图像。有3个缩略图。

还有一个灯箱效果，这就是我的问题发生的地方。每次单击主图像时，无论哪个拇指已加载到主图像，图像1都是灯箱中显示的图像。

我清楚地看到问题出在哪里，但我只是想知道如何制作它，以便在mainImage容器中加载的图像是灯箱中显示的图像。

这是我的代码，也许它解释得更好。

谢谢！

<div id="thumbs">
<img class="thumbSelected" src="images/<?php echo $row[thumb1]; ?>.jpg"  /><br />
<img src="images/<?php echo $row[thumb2]; ?>.jpg"  /><br />
<img src="images/<?php echo $row[thumb3]; ?>.jpg"  />
</div>



<div class="mainImage">
<a href="images/<?php echo $row[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row[name]; ?>">
<img class="mainImage" src="images/<?php echo $row[image1]; ?>.jpg" />
</a>
</div>
<script> ////large: ITEM1_01_large      small: ITEM1_01_thumb
//
$('#thumbs').delegate('img', {
mouseover: function(){
    $('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
    var $this = $(this),
    index = $this.index();
    $("#thumbs img").removeClass('thumbSelected');
        $this.addClass('thumbSelected');
        $("#big-image img").eq(index).show().siblings().hide();
}});
</script>

Answer 1

我无法真正看到你在做什么。但是，如果jQuery找到第一个元素，如果使用id选择器则停止。 如果要选择多个元素，则需要使用类。这就是类的用途。

灯箱只显示第一张照片

1 个答案: