javascript - 如何将内联元素与具有显示图库的放大弹出窗口中的图像结合起来

Question

我正在使用Magnific Popup .

我可以让它与galleries一起工作.

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

我实际上还可以混合内联元素 with images这基本上就是我想要的:

$('#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
});

我的问题是，在混合示例中，我没有显示缩略图“图库”，我基本上想要的是缩略图，单击时其行为就像一个图库，但中间有一个内联元素。

内联元素将有一个缩略图(和实际图像)，但单击时将成为内联元素。

我可以用fancybox来做到这一点你可以看到here如果您单击缩略图，可能会有助于澄清我的需要。 (由于缺乏移动设备的移动支持，我正在尝试使用 Magnific popup 来实现同样的效果)。

Answer 1

您可以将 mfp-TYPE CSS 类添加到应具有非默认内容类型的缩略图元素。 http://dimsemenov.com/plugins/magnific-popup/documentation.html#content_types