销毁 $.magnificPopup 图片库答案

【问题标题】：Destroy $.magnificPopup image gallery销毁 $.magnificPopup 图片库
【发布时间】：2022-08-03 03:38:44
【问题描述】：

我有一个带有magnificPopup plugin 的图片库。这是我的代码：

HTML：

<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>
<link href=\"https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css\" rel=\"stylesheet\">
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js\"></script>

<div class=\"thumbs\">
    <a href=\"https://picsum.photos/id/237/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/237/100.jpg\">
    </a>
    
    <a href=\"https://picsum.photos/id/1003/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1003/100.jpg\">
    </a>
    
    <a href=\"https://picsum.photos/id/1011/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1011/100.jpg\">
    </a>
    
    <a href=\"https://picsum.photos/id/1025/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1025/100.jpg\">
    </a>
</div>

Javascript：

$(()=>{
  $(\'.thumbs\').magnificPopup({
    type: \'image\',
    delegate: \'a\',
    gallery: {
      enabled: true
    }
  });
});

$(()=>{
  $(\'.thumbs\').magnificPopup({
    type: \'image\',
    delegate: \'a\',
    gallery: {
      enabled: true
    }
  });
});

<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js\"></script>
<link href=\"https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css\" rel=\"stylesheet\">
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js\"></script>

<div class=\"thumbs\">
    <a href=\"https://picsum.photos/id/237/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/237/100.jpg\">
    </a>

    <a href=\"https://picsum.photos/id/1003/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1003/100.jpg\">
    </a>

    <a href=\"https://picsum.photos/id/1011/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1011/100.jpg\">
    </a>

    <a href=\"https://picsum.photos/id/1025/800.jpg\" target=\"_blank\">
        <img src=\"https://picsum.photos/id/1025/100.jpg\">
    </a>
</div>

如何销毁/取消初始化 Magnific Popup？

标签： javascript html jquery magnific-popup

【解决方案1】：

这是销毁magnificPopup的方法：

$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');

// initialize magnificPopup
function initMagnificPopup() {
  $('.thumbs').magnificPopup({
    type: 'image',
    delegate: 'a',
    gallery: {
      enabled: true
    }
  });
}

// destroy magnificPopup
function destroyMagnificPopup() {
  $.magnificPopup.close();
  $('.thumbs').off('click');
  $('.thumbs a').off('click');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>

<div class="thumbs">
    <a href="https://picsum.photos/id/237/800.jpg" target="_blank">
        <img src="https://picsum.photos/id/237/100.jpg">
    </a>
    
    <a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
        <img src="https://picsum.photos/id/1003/100.jpg">
    </a>
    
    <a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
        <img src="https://picsum.photos/id/1011/100.jpg">
    </a>
    
    <a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
        <img src="https://picsum.photos/id/1025/100.jpg">
    </a>
</div>

<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>

【讨论】：