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

imagegallery代码：

$('.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更新来定位计数器。

＆＃13;

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

＆＃13;

.mfp-iframe-scaler .mfp-bottom-bar {
  margin-top: 4px; }

＆＃13;

Answer 2

想出来 - 对于iframe类型，你必须指定你想要一个计数器：

$(this).magnificPopup({
.....
iframe: {
             markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
                '<div class="mfp-counter"></div>'
}

Magnific Popup - Videogallery中的计数器

2 个答案: