동적 요소가있는 magnificopopup 사용

Question

두 장의 사진이 있는데 둘 다 클래스 "사진"이 있습니다. 각 사진 아래에 사진을 삭제할 수있는 버튼이 추가되었습니다.

그러나 DOM에서 사진을 제거한 후에 galery에서 사진을 열 수 있습니다. 예상 한 사진 1 장 중 1 장 대신 1 장이 여전히 오른쪽 하단에 표시되며 삭제 된 사진을 계속 볼 수 있습니다. magnificopop의 갤러리에서. 아직 캐시에 있습니까?

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

magnificopopup은 동적 요소와 호환되지 않습니까? 전체 페이지를 다시로드하지 않고 함수를 다시 초기화하는 방법이 있습니까?

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. */ 
});