在网页上显示缩略图，但通过 JavaScript 在模态中显示更大的图像

Question

我在网页上有一个很大的缩略图列表，我想在用户点击它时使用模式来显示更大版本的缩略图。

缩略图的文件名与大图的文件名相同 - 但插入了 _thumb。例如，较大的图像文件名为 123456_1.jpg - 缩略图文件名为 123456_1_thumb.jpg.

我已按照此代码 -> https://jsfiddle.net/dmvshn/75ueLgbt/ 使模态正常工作（并且有效）。但是，我不知道如何使用缩略图来代替实际的大图。

我想我可以在页面上显示缩略图文件名 - 例如：123456_1_thumb.jpg - 但是当我点击缩略图时，JavaScript 可以删除“_thumb " 在图像名称中，然后它将显示更大的图像 - 即 123456_1_thumb.jpg 变为 123456_1.jpg。

这是上面 link 中的 JavaScript 代码：

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

我已经尝试过使用 onclick 在模式中显示不同图像的其他方法，但我也无法使其工作。提前致谢。

Answer 1

只需在字符串上使用 replace() 函数：

var newSrc = this.src.replace(/_thumb/, "");

在网页上显示缩略图，但通过 JavaScript 在模态中显示更大的图像

Displaying thumbnail on web page but show larger image in modal via JavaScript

html

javascript

css

jquery

modal-dialog