我的DOM看起来像这样......
<div id="leftPan">
<div id="leftmemberPan">
<a href="#"><img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/></a>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<a href="#"><img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/></a>
</c:forEach>
</div>
</div>
leftmemberPan
显示主图片,thumbnailPan
显示缩略图列表
<c:forEach items="${article.images}" var="image">
只是一个JSTL标记,它包含缩略图图像数组。
请注意,我是jQuery的新手并且第一次使用它。
答案 0 :(得分:1)
您可以在缩略图的alt标签内保存主图像src的列表,然后修改leftmemberPan src以显示主图像。
例如:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
请记住,这只是一种方法。您也可以通过许多其他方式存储主图像。
希望这有帮助!
编辑:更新了代码示例以使用类属性
答案 1 :(得分:0)
我会将图像的路径放入每个缩略图的数据路径标记中,然后当您单击拇指时,从数据路径中获取该路径并将主路图像的src
设为该路径。
干杯!
答案 2 :(得分:0)
修改以前的帖子/答案(使用jQuery 1.7)......
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>