Используйте magnificPopup с динамическими элементами

Question

У меня две фотографии, у обоих есть класс «foto». Под каждой фотографией я добавил кнопку, которая позволяет мне удалить фотографию.

Тем не менее, я все еще могу открыть фотографию в галерее после удаления фотографии из DOM, вместо 1 из 1 фотографий, как ожидалось, у меня все еще есть 1 из 2 внизу справа, и я все еще вижу удаленную фотографию в галерее magnificPopup. Это все еще в кеше?

$(document).ready 
(
    function() 
    { 
     $('.foto').magnificPopup 
     (
      { 
       type: 'image', 
       closeOnContentClick: false, 
       closeBtnInside: false, 
       mainClass: 'mfp-with-zoom mfp-img-mobile', 
       image: 
       { 
        verticalFit: true, 
        titleSrc: function(item) 
        { 
         return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
        } 
       }, 
       gallery: 
       { 
        enabled: true 
       }, 
       zoom: 
       { 
        enabled: true, 
        duration: 300, // don't foget to change the duration also in CSS 
        opener: function(element) 
        { 
         return element.find('img'); 
        } 
       } 
      } 
     ); 
    } 
); 

Is magnificPopup не совместим с динамическими элементами? Есть ли способ повторно инициализировать функцию без перезагрузки всей страницы?

Answer 1

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

function init_magnificPopup() 
{ 
     $('.foto').magnificPopup 
     (
      { 
       type: 'image', 
       closeOnContentClick: false, 
       closeBtnInside: false, 
       mainClass: 'mfp-with-zoom mfp-img-mobile', 
       image: 
       { 
        verticalFit: true, 
        titleSrc: function(item) 
        { 
         return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
        } 
       }, 
       gallery: 
       { 
        enabled: true 
       }, 
       zoom: 
       { 
        enabled: true, 
        duration: 300, // don't foget to change the duration also in CSS 
        opener: function(element) 
        { 
         return element.find('img'); 
        } 
       } 
      } 
     ); 
} 

$(document).ready 
(
    function() 
    { 
     init_magnificPopup(); 
    } 
); 

Так я просто называю init_magnificPopup() в конце моей функции удаления. Это работает :)

Answer 2

Попробуйте это;)

function initMagnificPopup(){ 
    $('.foto').magnificPopup({ 
     type: 'image', 
     closeOnContentClick: false, 
     closeBtnInside: false, 
     mainClass: 'mfp-with-zoom mfp-img-mobile', 
     image: { 
      verticalFit: true, 
      titleSrc: function(item) { 
       return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
      } 
     }, 
     gallery: { 
      enabled: true 
     }, 
     zoom: { 
      enabled: true, 
      duration: 300, // don't foget to change the duration also in CSS 
      opener: function(element) { 
       return element.find('img'); 
      } 
     } 
    }); 
} 

$(function(){ 
    initMagnificPopup(); 
    /* add call this function whenever you delete an image. */ 
});