【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 2022-01-03
      • 1970-01-01
      • 1970-01-01
      • 2017-08-10
      • 2016-12-06
      • 2019-09-29
      • 1970-01-01
      • 2015-04-20
      • 1970-01-01
      相关资源
      最近更新 更多