Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to show images and video in Magnific Popup Gallery
@a-charafeddine

This comment has been minimized.

Copy link

a-charafeddine commented Jun 11, 2017

Thank you so much you saved me :D

@choquo

This comment has been minimized.

Copy link

choquo commented Jul 17, 2017

Amazing, thank you for share!

@gprobst

This comment has been minimized.

Copy link

gprobst commented Aug 7, 2017

Updated: Got it working. Thanks!

I for the life of me can't seem to get mixed types to work. Is there any way you could post a sample of the HTML that would go along with this?

@rahuldev345

This comment has been minimized.

Copy link

rahuldev345 commented Sep 23, 2017

Thanks

@woutercox

This comment has been minimized.

Copy link

woutercox commented Oct 3, 2017

Thank you, first piece code that actually worked for the site I'm working on!

@Hatteron

This comment has been minimized.

Copy link

Hatteron commented Oct 21, 2017

Please show html expample

@sunzxs

This comment has been minimized.

Copy link

sunzxs commented May 19, 2018

I've corrected the code and made HTML example: https://github.com/sunzxs/magnific-popup-image-and-video-slider

@rsinfoweb

This comment has been minimized.

Copy link

rsinfoweb commented Mar 4, 2019

Hi, Sunzxs
Thanks for sharing example..
I have download all files & run example.
But I don't have open video popup.
videopopup
can you please share update or any solutions for that.
Thanks advanced.

@zdimaz

This comment has been minimized.

Copy link

zdimaz commented Aug 1, 2019

<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

@joankent

This comment has been minimized.

Copy link

joankent commented Sep 22, 2019

I've corrected the code and made HTML example: https://github.com/sunzxs/magnific-popup-image-and-video-slider

thanks, you are the best!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.