-1

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

4

3 回答 3

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>

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

希望这可以帮助！

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

于 2012-08-07T18:16:01.493 回答
0

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

干杯!

于 2012-08-07T18:17:36.980 回答
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 属性。
于 2012-08-07T18:30:24.173 回答