Skip to content

Instantly share code, notes, and snippets.

@hirejordansmith
Last active February 5, 2025 08:47
Show Gist options
  • Select an option

  • Save hirejordansmith/1ac659aadc1d720f505b28a1540d6547 to your computer and use it in GitHub Desktop.

Select an option

Save hirejordansmith/1ac659aadc1d720f505b28a1540d6547 to your computer and use it in GitHub Desktop.
How to show images and video in Magnific Popup Gallery
@aliosys
Copy link
Copy Markdown

aliosys commented Nov 18, 2020

Thanks.! it worked .!

@javiersnipe
Copy link
Copy Markdown

<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
Copy Markdown

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