Clear the history of Magnific popup and show the first image I opened

I'm looking for a way to change the type of Magnific Popup and then change it back. In the html below, when I open Magnific popup, I can see the first.svg. When I click on the a in the .each-link to show the comic contents or youtube video, when I close and re-open the popup, I do not see the first.svg, I see the comic contents or youtube video. Is there a solution?

<div id="modal" class="modal-content mfp-hide">
  <a href="#!" class="overlay"></a>
  <div class="modal-wrapper">
    <div class="modal-contents">
      <div class="modal-content">
      <button class="modal-close">✖︎</button>
        <div class="each-link">
           <a class="link comic" href="/test/" data-src="test.jpg"><img src="comic.svg"></a>
          <a class="link video" data-type="video" data-src="https://www.youtube.com/watch?xxxxx"><img src="youtube.svg"></a>
        </div>
        <div class="content-image"><img src="first.svg"></div>
        <!-- data-src are retrieved from the custom fields-->
      </div>
    </div><!-- .modal-contents -->
  </div><!-- .modal-wrapper -->
</div>
//popup
jQuery(function ($){
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        modal: true,
        callbacks: {
            close: function() {
                $.magnificPopup.instance.popupsCache = {}; // delete all templates
            }
        }
    });
    $(document).on('click', '.modal-close', function (e) {
        e.preventDefault(); 
        $.magnificPopup.close();
        location.reload();
    });
});


(function($){$( document ).on( 'click', '.each-link a', function( e ){
  e.preventDefault();
  var src = $(this).data('src'),
      type = $(this).data('type'),
      target = $(this).parent().parent().children('.content-image');

  if( type === 'video' ){
    const regex = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/gm;
    src = src.replace(regex, `$5`);
    target.html( '<iframe src="https://www.youtube.com/embed/' + src + '">');
    target.addClass( 'embed-video' );
    target.removeClass( 'embed-comic' );
  } else {
    target.html( '<img src="' + src + '">' );
    target.removeClass( 'embed-video' );
    target.addClass( 'embed-comic' );
  }
  
});})(jQuery);


from Recent Questions - Stack Overflow https://ift.tt/WdfXsgQ
https://ift.tt/flKj1eg

Comments

Popular posts from this blog

Today Walkin 14th-Sept

Spring Elasticsearch Operations

Hibernate Search - Elasticsearch with JSON manipulation