如何将来自不同src位置的图像与单击的缩略图调用到单独的div上

我正在制作一个画廊网页，它有小缩略图和一个更大的容器div来显示选定的图像。缩略图是300x300，存储在缩略图文件夹中，但我希望能够单击缩略图，并让它调用与缩略图同名的"图像"文件夹中的全分辨率图像。所以thumbanil 1应该是src="thumb/image1.jpg"，当点击它时，我希望它调用"images/image1..jpg"，而不是在主容器上调用"thumb/image1.jpg"。

代码：

HTML

<div class="containermain">
<img id="img-main" alt="main image" src="images/placeholder.png" />
<div class="clear"></div></div>
<div class="containerimg">
<img class="img" alt="thumbnail-image1" src="thumb/image1.jpg" />
<img class="img" alt="thumbnail-image2" src="thumb/image2.jpg" />
<img class="img" alt="thumbnail-image3" src="thumb/image3.jpg" />
<img class="img" alt="thumbnail-image4" src="thumb/image4.jpg" />
<img class="img" alt="thumbnail-image5" src="thumb/image5.jpg" />
</div>

Javascript

$(document).ready( function() {
    $("img.img" ).on( "click", function( event ) {
        $("#img-main").attr("src", $(this).attr("src"));
    });
});

到目前为止，这是可行的，但主容器上显示的大图像是缩略图大小的图像，如果我将src更改为带有全分辨率图像的images文件夹，网站运行速度会太慢（每个全图像大约5mb-10mb，我计划有18个图像）。任何帮助都将不胜感激，谢谢！

执行字符串replace。

$(document).ready( function() {
    $("img.img" ).on( "click", function( event ) {
        var currentSrc= $(this).attr("src");
        currentSrc=currentSrc.replace("thumb/", "images/");
        $("#img-main").attr("src", currentSrc);
    });
});

这是一个jsfiddle样本

但正如TNC在评论中提到的，最好的解决方案是在全分辨率图像src 的图像标签中保留HTML5数据属性

<img class="img" alt="thumbnail-image1" data-fullsize="images/image1.jpg" 
          src="thumb/image1.jpg" />

阅读并使用

$(document).ready( function() {
    $("img.img" ).on( "click", function( event ) {
        var newSrc= $(this).data("fullsize");          
        $("#img-main").attr("src", newSrc);
    });
});

这是的一个示例

相关内容

最新更新

热门标签：