Javascript：对于每个图像点击显示模式与图像缩放答案

【问题标题】：Javscript: For every image click show modal with image zoomJavascript：对于每个图像点击显示模式与图像缩放
【发布时间】：2024-01-21 11:01:01
【问题描述】：

我目前正在研究一个简单的图像模式，它应该只显示带有关闭按钮的图像缩放。我有一个从我的 CMS 生成的标记，其中可以将 a 标签配置为具有一个额外的类“灯箱”作为属性，然后应该触发灯箱脚本。

但是，目前它似乎只适用于加载的第一张图片。当我单击另一张图像时，它显示的图像源与第一张相同，我不确定如何修复它。是否需要先循环所有图像？

我的 CMS 在 DOM 中为这样的图像生成一个标记（图像是一个占位符）：

<a href="image1.png" class="lightbox">
  <img class="image-embed-item" src="image" >
</a>

<a href="image1.png" class="lightbox">
   <img class="image-embed-item" src="image" >
</a>

<a href="image1.png" class="lightbox">
    <img class="image-embed-item" src="image" >
</a>

然后在我的默认布局中添加灯箱模式的标记：

<div id="imagemodal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="close">&times;</div>
        <img src="" id="imagepreview" style="width: 100%;" >
    </div>

</div>

这是javascript代码：

window.addEventListener('DOMContentLoaded', function () {

    // add imageresource id to loaded image
    $(".image-embed-item").attr("id", "imageresource");

    // add data-toggle class to all lightbox elements
    $(".lightbox").attr("data-toggle", "lightbox");

    // click event for data toggle
    $(document).on('click', '[data-toggle="lightbox"]', function (event) {
        event.preventDefault();
    // use image source from clicked image
        $('#imagepreview').attr('src', $('#imageresource').attr('src'));
        $('.modal').css('display', 'block');
    });

    $(document).on('click', $('.closeModal'), function (event) {
        // close function
    });
});

这是我的 CSS：

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

【问题讨论】：

标签： javascript html css modal-dialog lightbox

【解决方案1】：

您对所有.image-embed-item 使用相同的ID：

 $(".image-embed-item").attr("id", "imageresource");

然后使用$('#imageresource').attr('src') 设置预览。这就是为什么它总是在模态中显示第一张图像。您可以通过将$('#imageresource').attr('src') 更改为$(this).find('img').attr('src') 来解决它。像这样的：

window.addEventListener('DOMContentLoaded', function () {

  // add data-toggle class to all lightbox elements
  $(".lightbox").attr("data-toggle", "lightbox");

  // click event for data toggle
  $(document).on('click', '[data-toggle="lightbox"]', function (event) {
    event.preventDefault();
  // use image source from clicked image
    $('#imagepreview').attr('src', $(this).find('img').attr('src'));
    $('.modal').css('display', 'block');
  });

  $(document).on('click', $('.closeModal'), function (event) {
    // close function
  });
});

【讨论】：