dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

Multiple content type in single gallery #1130

Open gmatta01 opened 5 years ago

gmatta01 commented 5 years ago

I have been looking for a solution for using image as well as video (any source, youtube or mp4) in a single gallery. There are some options but incomplete, like using a callback

 callbacks: {
        elementParse: function(item) {

           if(item.el.attr('data-image_type') == 'video') {
             item.type = 'iframe';
              }
         else {
        item.type = 'image';
       }
        }

      }

Here I used custom attribute to check and change the type. Works fine till here.

Now I want to change the markup, title source etc, which I tried to add in callback but it doesn't work.

If anyone has a solution, please do share.

bobitza commented 2 years ago

Its' work with your variant thanks

element.magnificPopup({
        delegate: 'a[data-lightbox="gallery-item"]',
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: elCloseButton,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-fade', // class to remove default margin from left and right side
        image: {
            verticalFit: true
        },
        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.attr('data-image_type') == 'video') {
                    item.type = 'iframe';
                }
                else {
                    item.type = 'image';
                }
            }
        }
    });