How can I combine inline elements with images in magnific popup having a displayed gallery

Question

I am using Magnific Popup.

I can get it to work with galleries.

$(document).ready(function() {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
        }
    });
});

I can also actually mix inline elements with images which is basically what I want:

$('#open-popup').magnificPopup({
    items: [
      {
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
        title: 'Peter & Paul fortress in SPB'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
        type: 'inline'
      },
      {
        src: '#my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is a default type
});

My problem is that in the mixed example, I don't have the thumbnail "gallery" displayed, what I basically want is thumnail images, that when clicked behave like a gallery but with one inline element in between.

The inline element will have a thumbnail (and actual image), but when clicked will be an inline element.

I was able to do it with fancybox and you can see here if you click the thumbnails, it might help clarify what I need. (I am trying to achieve the same thing with Magnific popup with because of the lack of mobile support of mobile).

Answer 1

You may add mfp-TYPE CSS class to thumbnail element that should have non-default content type. http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types