Magnific Popup Gallery: how can I display a spinner in an inline type?
I am using magnific popup to display mixed gallery image type and 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}
});
Full working example here .
As you can see, elements of the image type automatically get an "x of y" counter like this:
How can I get this counter for inline type elements?
I managed to get it to work using non-dynamically generated inline elements containing
<div class="mfp-content"></div>
Patch with max. popup:
https://github.com/dimsemenov/Magnific-Popup/pull/537
It can only be added to dynamically created inline popups, for that you just need to add <div class="mfp-content"></div>
to the element markup. Example http://codepen.io/dimsemenov/pen/GpdFs
Otherwise, you will need to write your own counter via the popup API.