I am using magnific popup to create an image gallery via the below:

$('.main-content').magnificPopup({
  delegate: '.gallery', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery: {enabled:true}
  // other options
});

I also have a video embed using the below:

$('.video').magnificPopup({
    type: 'iframe',
    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: {
        youtube: {
          index: 'youtube/', // 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/embed/%id%?autoplay=1' // URL that will be set as a source for iframe. 
        },
        vimeo: {
          index: 'vimeo/',
          id: '/',
          src: '//player.vimeo/video/%id%?autoplay=1'
        },
        gmaps: {
          index: '//maps.google.',
          src: '%id%&output=embed'
        }

        // you may add here more sources

      },

      srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
    }

});

How can I merge the video iframe into the gallery? I cannot use the items array because my images and videos are dynamic.

Thanks

I am using magnific popup to create an image gallery via the below:

$('.main-content').magnificPopup({
  delegate: '.gallery', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery: {enabled:true}
  // other options
});

I also have a video embed using the below:

$('.video').magnificPopup({
    type: 'iframe',
    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: {
        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'
        },
        gmaps: {
          index: '//maps.google.',
          src: '%id%&output=embed'
        }

        // you may add here more sources

      },

      srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
    }

});

How can I merge the video iframe into the gallery? I cannot use the items array because my images and videos are dynamic.

Thanks

• javascript
• jquery
• iframe
• plugins
• magnific-popup

4 Answers 4

Here is a simple solution I've used for this:

$('.image-link, .video-link').magnificPopup({
    callbacks: {
      elementParse: function(item) {
         // the class name
         if(item.el.context.className == 'video-link') {
           item.type = 'iframe';
         } else {
           item.type = 'image';
         }
      }
    },
    gallery:{enabled:true},
    type: 'image',
});

It should work with type formatters.

You are able to define the type ofa gallery item using the mfp-TYPE CSS class. So in this case you would add mfp-iframe to the anchor tag pointing to your video and the plugin will handle the rest.

HTML:

<div class="gallery">
  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-1.jpg">
     <img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
  </a>

  <!-- Video item with mfp-iframe class -->
  <a href="https://www.example.com/video-url" class="mfp-iframe">
     <img src="https://www.example.com/video-thumbnail.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-2.jpg">
     <img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-3.jpg">
     <img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
  </a>
</div>

JS:

$('.gallery').magnificPopup(
        {
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return '';
                }
            }
        }
    );

More information can be found in the documentation:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types

I solved this problem as following.

$('.video').each(function(){

var items = [];
var temp_count = 0;

$('.img_container a').each(function(){
    if($(this).attr('class') == 'video'){
        items.push({
            src:$(this).attr('href'),
            type:'iframe'
        });
        temp_count = temp_count +1;
    }else{
        items.push({
            src:$(this).attr('href'),
            type:'image',
            tLoading: '', 
            removalDelay: 500
        });
        temp_count = temp_count +1;
    }

});

$('.img_container a').each(function(index2, element){    
    $(this).magnificPopup({
        items:items,
        midClick:true,
        index: parseInt(index2),
        gallery: {
            enabled: true
        }
    }); 
});
});

$('.magnific-gallery').each(function(index1, element){// .magnific-gallery = //.gallary var items = []; var temp_count = 0;

$('.img_container a').each(function(){
    if($(this).attr('class') == 'video'){
        items.push({
            src:$(this).attr('href'),
            type:'iframe'
        });
        temp_count = temp_count +1;
    }else{
        items.push({
            src:$(this).attr('href'),
            type:'image',
            tLoading: '', 
            removalDelay: 500
        });
        temp_count = temp_count +1;
    }
});



$('.img_container a').each(function(index1, element){   
    $(this).magnificPopup({`enter code here`
        items:items,
        midClick:true,
        index: parseInt(index1),
    //  index: 4,
        gallery: {
            enabled: true
        }
    }); 
});

});

I hope you will process your problems on based above code.

    /*reference : https://gist.github.com/hirejordansmith/1ac659aadc1d720f505b28a1540d6547#file-magnific-popup-gallery-image-plus-video-js */
 $(".popup-youtube").removeAttr('class').attr('class','popup-youtube');
    $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        /*titleSrc: function(item) {
          return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
        }*/
      },
      callbacks: {
        elementParse: function(item) {
     // the class name

     if(item.el.context.className == 'popup-youtube') {
       item.type = 'iframe';
     } else {
       item.type = 'image';
     }
        }
      },
  });

Complete working example just copy and run code.(change class name as per your code)