如果您翻转缩略图,我有一个主图像,每次都会加载不同的图像。有 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>