Search code examples
magnific-popup

Magnific Popup Gallery: How can I display a counter in an inline type item?

I am using magnific popup to display a mixed gallery of image type and inline type items.

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

The full working example is here.

As you can see, the image type items automatically get a "x of y " counter like this:

enter image description here

How can I get this counter for inline type items, too?

Solution

  • I managed to make it work using non-dynamically generated inline items containing

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

    patching magnific popup slightly:

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