Destroy $.magnificPopup image gallery

I have an image gallery with magnificPopup plugin. This is my code:

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>

How to destroy/uninitialize Magnific Popup?

Solution

This is how to destroy 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>