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
Post a Comment