Clever Geek Handbook

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:

enter image description here

How can I get this counter for inline type elements?

+3


source to share


2 answers


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

0


source


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.

+1


source






More articles:


All Articles