Magnific-Popup icon indicating copy to clipboard operation
Magnific-Popup copied to clipboard

Multiple content type in single gallery

Open gmatta01 opened this issue 5 years ago • 1 comments

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.

gmatta01 avatar Aug 14 '19 11:08 gmatta01

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';
				}
			}
		}
	});

bobitza avatar Mar 23 '22 10:03 bobitza