如何将内联元素与具有显示画廊的宏观弹出窗口中的图像结合起来

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 
}); 

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

内联元素将有一个缩略图（和实际图像），但点击时将是一个内联元素。

我能够做到这一点与fancybox，你可以看到here如果你点击缩略图，它可能有助于澄清我需要什么。 （由于缺乏手机的移动支持，我试图用Magnific popup实现同样的功能）。

Answer 1

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

Answer 2

jQuery(document).ready(function($) { 
    $('.owl-wrapper').magnificPopup({ 
      delegate: 'a', 
      type: 'image', 
      tLoading: 'Loading image #%curr%...', 
      mainClass: 'mfp-img-mobile', 
      gallery: { 
       enabled: true, 
       navigateByImgClick: true, 
       preload: [0,1] 
      }, 
      image: { 
       tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', 
      }, 
      callbacks: { 
       elementParse: function(item) { 
     if(item.el.context.className == 'video-link') { 
      item.type = 'iframe'; 
     } else if(item.el.context.className == 'inline-link') { 
      item.type = 'inline'; 
     } else { 
      item.type = 'image'; 
     } 
       } 
      }, 
    }); 
});