Javascript：对于每个图像，单击显示带有图像缩放的模式

Question

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

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

我的 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;
}

Answer 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
  });
});

Javascript：对于每个图像，单击显示带有图像缩放的模式

Javscript: For every image click show modal with image zoom

html

javascript

css

modal-dialog

lightbox