magnific-popup - Magnific Popup - 视频库中的计数器

Question

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

但与图片库不同的是，视频库不显示计数器，例如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
      }
    }
});

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

谢谢

Answer 1

很久以前有人问过这个问题，但有一个完整的答案:

您必须添加或指定 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; }