Gallery with mixed content types

[oldquest]

Gallery with mixed content types, it always opens the first element, should open the clicked element

http://codepen.io/anon/pen/KvcCJ

[dimsemenov]

To make it open on clicked element, you should initialize it from DOM elements, currently you're initializing it from the items option. http://dimsemenov.com/plugins/magnific-popup/documentation.html

[oldquest]

If its not initializing from items, how do you define the type of each element with mixed content?

[dimsemenov]

You may define type of popup via mfp-TYPE CSS class, check http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types

[oldquest]

I've missed that in documentation, my bad. Thank you!

[dimsemenov]

As a third option you may do a manual check for type, e.g.:

$('.image-link').magnificPopup({
  type:'image',
  callbacks: {
    elementParse: function(item) {
      // Function will fire for each target element
      // "item.el" is a target DOM element (if present)
      // "item.src" is a source that you may modify

      if(something) {
         item.type = 'image';
      } else {
         item.type = 'video';
      }

    }
  }
});

[Pixelous]

@dimsemenov hi!

I tried:

if(item.el.context.className == 'portfolio-data magnificpopup-portfolio-video') {
     item.type = 'video';
} else {
    item.type = 'image';
 }

but only image works, not the video unfortunately.

There is an error in Chrome console:

Uncaught TypeError: Property 'getVideo' of object [object Object] is not a function 

.

Any tips what's wrong?

[Pixelous]

Ups, sorry, that works:

if(item.el.context.className == 'portfolio-data magnificpopup-portfolio-video') {
     item.type = 'iframe';
} else {
    item.type = 'image';
 }

.

If this code is OK, I mean in terms of performance?
Another question please, the gallery not works unfortunately, I mean there are no next/prev buttons however

.
gallery:{enabled:true},

is enabled.

Any tips please?

[zanedev]

its been a while on this thread but thought i'd update in case anybody else comes across this, gallery:{enabled:true} is working for me using this solution.

[JamesMcMahon]

For anyone coming in through Google. Youtube / Vimeo / etc videos don't load properly locally (as in running your site from file:// while having the standard http:// for youtube). Spun my wheels on this for awhile thinking the above configuration didn't work, but it was just due to running it locally. Once I put a local web server in the middle everything worked as expected.

[alur222]

This works for non-image or non-video elements too.
Just set item.type = 'inline' and item.src='<div class="white-popup">something.file download here</div>';

You have to provide your css for white-popup. Cheers! 🍷

[manchumahara]

$('.Class_NAME_HERE').magnificPopup({
			type: 'image',
			gallery:{
				enabled:true
			},
			callbacks: {
				elementParse: function (item) {
					// Function will fire for each target element
					// "item.el" is a target DOM element (if present)
					// "item.src" is a source that you may modify
					

					item.type = $(item.el.context).data('itemtype');
					item.iframe = {
						/*markup: '<div class="mfp-iframe-scaler">'+
						 '<div class="mfp-close"></div>'+
						 '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
						 '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button*/
						patterns: {
							dailymotion: {
								index: 'dailymotion.com',
									id: function(url) {
									var m = url.match(/^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/);
									if (m !== null) {
										if(m[4] !== undefined) {
											return m[4];
										}
										return m[2];
									}
									return null;
								},
								src: 'https://www.dailymotion.com/embed/video/%id%'
							},
							youtube: {
								index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
									id: 'v=', // String that splits URL in a two parts, second part should be %id%
									// Or null - full URL will be returned
									// Or a function that should return %id%, for example:
									// id: function(url) { return 'parsed id'; }
									src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
							},
							vimeo: {
								index: 'vimeo.com/',
									id: '/',
									src: '//player.vimeo.com/video/%id%?autoplay=1'
							}
						},
						srcAction: 'iframe_src'
					}

					

					

				}
			}
			// other options
		});

in the anchor tag put data-itemtype='image' for photo type or data-itemtype="iframe" for video type