Javascript 如何从不同的src位置调用图像，以将单击的缩略图图像调用到单独的div上？

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

代码：

HTML

---

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

执行字符串

替换

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

这是一个JSFIDLE示例

但是正如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 currentSrc= $(this).attr("src");
        currentSrc=currentSrc.replace("thumb/", "images/");
        $("#img-main").attr("src", currentSrc);
    });
});

这是一个JSFIDLE示例

但是正如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);
    });
});