如何使用jQuery单击其缩略图时显示主图像

How to display main image when clicked on its thumbnail using jQuery

本文关键字：显示 图像 略图 何使用 jQuery 单击      更新时间：2023-09-26

我的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的新手，并且第一次使用它。

您可以在缩略图的 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>

请记住，这只是一种方法。 您也可以通过许多其他方式存储主映像。

希望这有帮助！

编辑：更新了代码示例以利用类属性

我会将图像的路径放入每个缩略图的数据路径标签中，然后当您单击拇指时，从数据路径中抓取该路径并使主图像的src该路径。

干杯！

修改以前的帖子/答案（使用 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>
  • 对主文件图像路径使用数据属性。
  • 在页面加载后执行一次（-time）DOM 查找以引用主图像元素。
  • 只需使用缩略图的数据属性设置图像元素的 src 属性即可。
相关文章：