Javscript: для каждого изображения нажмите показать модальное с увеличением изображения - PullRequest
Новая
       20

Javscript: для каждого изображения нажмите показать модальное с увеличением изображения

0 голосов
/ 01 апреля 2020

В настоящее время я работаю над простым модальным изображением, которое должно показывать только масштаб изображения с кнопкой закрытия. У меня есть разметка, сгенерированная из моей CMS, в которой тег можно настроить, чтобы иметь дополнительный класс «лайтбокс» в качестве атрибута, который должен затем запускать скрипт лайтбокса.

Однако в настоящее время, похоже, он работает только для первое загруженное изображение. Когда я нажимаю на другое изображение, оно показывает тот же источник изображения из первого, и я не уверен, как это исправить. Нужно ли сначала зацикливать все изображения?

Моя 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;
}

1 Ответ

0 голосов
/ 01 апреля 2020

Вы используете один и тот же идентификатор для всех .image-embed-item in: 

 $(".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
  });
});
...