How to show images and video in Magnific Popup Gallery

magnific-popup-gallery-image-plus-video.js

jQuery(document).ready(function($) {
  $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        /*titleSrc: function(item) {
          return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
        }*/
      },
      callbacks: {
        elementParse: function(item) {
     // the class name
     if(item.el.context.className == 'video-link') {
       item.type = 'iframe';
     } else {
       item.type = 'image';
     }
        }
      },
  });
});

Please show html expample

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

Hi, Sunzxs
Thanks for sharing example..
I have download all files & run example.
But I don't have open video popup.

can you please share update or any solutions for that.
Thanks advanced.

thanks man . very helpfull ...

<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

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

thanks, you are the best!

Thanks.! it worked .!

<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!

How to add titleSrc to iframe type? Thx