Галерея изображений, использующая magnific-popup, всегда всплывает первой, а не той, которая выбрана при клике

Я использую JQUERY и Magnific Popup в проекте django. Когда я нажимаю на любое изображение в галерее, всегда всплывает первое изображение, а не то, которое было выбрано. Вот мой текущий код:

Вот шаблон django

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
{% for image in images %}
  <div class="image">
    <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}">
      {% thumbnail MEDIA_ROOT|add:"images/"|add:dir|add:"/"|add:image 300x300 crop="smart" as im %}
      <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}" class="image-link">
        <img src="{{ im.url }}">
      </a>
    </a>
    <div class="info">
      <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }} " class="title" >
        {{ dir }}
      </a>
    </div>
  </div>
{% endfor %}

Вот javascript и великолепное всплывающее окно

<script>
  $(document).ready(function()  { 
   $(document).on('click', '.image-link',function(e) {
       e.preventDefault(); 
       $('.image-link').magnificPopup({
           type: 'image',
           closeOnContentClick: true,
           closeBtnInside: true,
           midClick: true,
           mainClass: 'mfp-with-zoom mfp-img-mobile',
           gallery: {
               enabled: true,
               navigateByImgClick: true,
               preload: [0,1] // Will preload 0 - before current, and 1 after the current image
           },
           image: {
             verticalFit: true,
           },
           zoom: {
             enabled: true
           },
           callbacks: {
              beforeOpen: function() {

              }
            },     
       }).magnificPopup('open');
   });
  });
 </script>

Я думаю, что проблема в том, что вы инициализируете Magnific Popup для каждой ссылки на изображение, что заставляет его всегда открывать первое изображение в галерее.

Попробуйте скорректировать код JavaScript следующим образом:

<script>
  $(document).ready(function()  { 
    // Initialize Magnific Popup
    $('.image-link').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: true,
      midClick: true,
      mainClass: 'mfp-with-zoom mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
        verticalFit: true,
      },
      zoom: {
        enabled: true
      },
      callbacks: {
        beforeOpen: function() {

        }
      },     
    });

    // Click event handler for image links (No need to initialize Magnific Popup here)
    $(document).on('click', '.image-link', function(e) {
      e.preventDefault(); 
      // Magnific Popup is already initialized, so no need to call it here
    });
  });
</script>

Надеюсь, это решит проблему :)

Добавьте событие прокрутки для инициализации всплывающего окна magnific для всех страниц.

<script>
  $(document).ready(function()  { 
    function initializeMagnificPopup() {
       $('.image-link').magnificPopup({
           type: 'image',
           closeOnContentClick: true,
           closeBtnInside: true,
           midClick: true,
           mainClass: 'mfp-with-zoom mfp-img-mobile',
           gallery: {
               enabled: true,
               navigateByImgClick: true,
               preload: [0,1] // Will preload 0 - before current, and 1 after the current image
           },
           image: {
             verticalFit: true,
           },
           zoom: {
             enabled: true
           },
           callbacks: {
              open: function() {
                  jQuery('body').addClass('magnificpopupnoscroll');
              },
              close: function() {
                  jQuery('body').removeClass('magnificpopupnoscroll');
              }   
          }, 
        });
      }
    // Initialize Magnific Popup when document is ready
    initializeMagnificPopup();

    // Reinitialize Magnific Popup on window scroll
    $(window).on('scroll', function() {
      initializeMagnificPopup();
    });

       // Click event handler for image links (No need to initialize Magnific Popup here)
    $(document).on('click', '.image-link', function(e) {
      e.preventDefault(); 
      // Magnific Popup is already initialized, so no need to call it here
    });
  });
 </script>
Вернуться на верх