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

时间:2012-08-07 18:09:08

标签: javascript jquery

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

3 个答案:

答案 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>
  • 使用主文件图像路径的数据属性。
  • 在页面加载后执行一次(-time)DOM查找以引用主图像 元件。
  • 只需使用缩略图的数据属性设置图像元素的src属性即可。