Gallery with mixed types, abstract version

[Bidrman]

hey, I checked all issued that were somehow related with the mixed types, but none of the solution really worked for me.

I have gallery, where I want to put images or iframes. problem is when I open the popup gallery on the iframe I cant get to the next images, where are images, it acts like its frozen.

When I open the images and try to load the iframe, javascript tries for a while and then says it cannot load the image.

I am trying to reckognize the types based on the data attribute value I sent there from server, if the data-type="photo" then type should be image, if data-type="iframe" then type should be iframe.

Code is below, any tips please?

function initGalleryPopup(parent){

if(typeof parent === 'undefined') parent = $('body');

parent.find('.zoom-gallery').each(function(){

    $(this).magnificPopup({
        delegate: 'a',
        type: 'image',      
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {
                return item.el.find('img').attr('alt');
            }
        },
        gallery: {
            enabled: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function(element) {
                return element.find('img');
            }
        },
        callbacks: {

            elementParse: function(item) {

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

            }
        } 

    });

});

[finex]

Hi, I'm having the same problem. @Bidrman did you solved it?

[finex]

I've solved with a small change on your code. Instead of:

if(item.type === 'iframe') {

I've put:

if(item.el.data("type") === 'iframe') {

And it works fine.

Here is my full working code:

$(this).magnificPopup({
  delegate: 'a',
  mainClass: 'mfp-fade',
  gallery:{
    enabled: true,
  },
  callbacks: {
    elementParse: function(item) {
      if(item.el.data("type") === 'iframe') {
        item.type = 'iframe';
      }
      else{
        item.type = 'image';
      }
    }
  }
});