3

我制作了一个带有华丽弹出窗口的视频库。

但与图片库不同的是，视频库不显示计数器，例如视频右下角的1/3 。为什么不？在图像库中，它运行良好。

视频库的代码：

$('.gallery_video').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: true,
        fixedContentPos: false,
        gallery: {
          enabled:true
        },
        callbacks: {
      lazyLoad: function(item) {
        console.log(item); // Magnific Popup data object that should be loaded
      }
    }
    });
});

图片库代码：

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: true,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    },
    callbacks: {
      lazyLoad: function(item) {
        console.log(item); // Magnific Popup data object that should be loaded
      }
    }
});

两个脚本都没有指定一个计数器，那么为什么它没有出现在两个脚本上呢？

谢谢你

4

2 回答 2

2

曾经有人问过这个问题，但这是一个完整的答案：

您必须添加或指定 iframe 标记。您还想添加一些小的 CSS 更新来定位计数器。

var $attachmentContainers = $('.js-attachments-in-gallery');

$attachmentContainers.magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery:{
    enabled:true,
  },
  iframe: {
    markup:
    '<div class="mfp-iframe-scaler">'+
      '<div class="mfp-close"></div>'+
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '<div class="mfp-bottom-bar">'+
        '<div class="mfp-counter"></div>'+
      '</div>'+
    '</div>'
  }
});
.mfp-iframe-scaler .mfp-bottom-bar {
  margin-top: 4px; }

于 2016-02-18T09:10:58.920 回答
0

想通了 - 对于 iframe 类型，您必须指定您想要一个计数器：

$(this).magnificPopup({
.....
iframe: {
             markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
                '<div class="mfp-counter"></div>'
}
于 2014-08-06T18:38:37.607 回答