Magnific Popup Gallery：如何在内联类型项目中显示计数器？答案

【问题标题】：Magnific Popup Gallery: How can I display a counter in an inline type item?Magnific Popup Gallery：如何在内联类型项目中显示计数器？
【发布时间】：2014-08-27 12:21:50
【问题描述】：

我正在使用magnific popup 显示image type 和inline type 项目的混合库。

HTML：

<a href="http://lorempixel.com/400/200/" class="magnific">Image Popup</a>

<a href="#test-popup" class="magnific mfp-inline">Show inline popup</a>

<!-- the inline content -->
<div id="test-popup" class="white-popup mfp-hide">
  Inline content
</div>

JS：

$('.magnific').magnificPopup({
  type: 'image',
  gallery: {enabled: true}
});

完整的工作示例是here。

如您所见，图像类型项目自动获得一个“x of y”计数器，如下所示：

我怎样才能获得内联类型项目的这个计数器呢？

【问题讨论】：

标签： magnific-popup

【解决方案1】：

它只能添加到动态生成的内联弹出窗口中，为此您只需将<div class="mfp-content"></div> 添加到项目的标记中。示例http://codepen.io/dimsemenov/pen/GpdFs

否则，您需要通过弹出 API 编写自己的计数器。

【讨论】：

谢谢。 “弹出式 API”是什么意思？

【解决方案2】：

我设法使用 非动态生成的包含

的内联项使其工作

<div class="mfp-content"></div>

修补放大弹出窗口：

https://github.com/dimsemenov/Magnific-Popup/pull/537

【讨论】：

我试过你的代码，但仍然没有计数器。您是否在内联标记中添加了一些内容？