Magnific-popup: 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! :wine_glass:

[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