如何在具有显示库的放大弹出窗口中组合内联元素和图像

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

本文关键字：组合 窗口 图像 元素 显示 放大      更新时间：2023-09-26

我正在使用放大弹出菜单。

我可以让它与画廊合作。

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

我还可以将内联元素与图像混合，这基本上就是我想要的：

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

我的问题是，在混合示例中，我没有显示缩略图"库"，我基本上想要的是thumbail图像，当点击时，它们的行为就像一个库，但中间有一个内联元素。

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

我可以用fancybox做这件事，你可以在这里看到，如果你点击缩略图，它可能有助于澄清我需要什么。（我正试图用Magnific弹出来实现同样的事情，因为缺乏移动设备的移动支持）。

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

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';
         }
                }
            },
    });
});
相关文章：