Skip to content

Instantly share code, notes, and snippets.

@hirejordansmith
Last active December 6, 2023 22:28
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hirejordansmith/1ac659aadc1d720f505b28a1540d6547 to your computer and use it in GitHub Desktop.
Save hirejordansmith/1ac659aadc1d720f505b28a1540d6547 to your computer and use it in GitHub Desktop.
How to show images and video in Magnific Popup Gallery
@javiersnipe
Copy link

<script>
$(document).ready(function() {

    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        },
        callbacks: {

            elementParse: function(item) {

                if(item.el[0].className == 'video') {
                    item.type = 'iframe';
                } else {
                    item.type = 'image';
                }
            }

        },

    });

});
</script>

Are JQ to change this to:

	    callbacks: {
	      	elementParse: function(item) {
	        	if(item.el.hasClass("multiple_gallery_video")){
	        		console.log("multiple_gallery_video")
	        		item.type = 'iframe';
	        	}else {
	                item.type = 'image';
	            }
	            console.log(item); // Do whatever you want with "item" object
	      	}
	    },

This works

Thank you so much !!! You saved me!

@GZ-GENUX
Copy link

How to add titleSrc to iframe type? Thx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment