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:
Image Popup
Show inline popup
<!-- 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:
How can I get this counter for inline type items, too?
It only can be added to dynamically generated inline popups, to do this you just need to add <div class="mfp-content"></div> to markup of item. Example http://codepen.io/dimsemenov/pen/GpdFs
Otherwise, you'll need to write your own counter via popup API.
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

Related Links

Add data to items in Magnific Popup
How to set the divs to make Magnific Popup animations work
how to display map in mobile devices using magnific popup?
Magnific Popup - Counter in Videogallery
how to manually open and close the popup using Magnific-Popup
How to customize arrows and close button?
no closing “X” with inline content
How to prevent close
Magnific-Popup Loading iframe from non-video players URL
Magnific popup - put arrows inside of an image
magnific closeOnContentClick does not work
How can style popup iframe in Magnific Pop-Up?
Gallery with mixed content types
Title for iframe/video in magnific popup
Magnific Popup: Close floats to the right
Calling magnific-popup on button element instead of an anchor

Categories

HOME
image
magnific-popup
fluentd
path-finding
angular-material
session
adb
at-command
amazon-ecs
jpeg
binary-tree
survey
callback
retrofit
cross-validation
kentor-authservices
qt-creator
carthage
libtiff
pugjs
evopdf
java-3d
clickonce
cloudhub
kvc
mustache.php
format-specifiers
icloud-api
poltergeist
nhapi
windowbuilder
srcset
r-raster
lightswitch-2013
key-value-observing
semantic-versioning
html5-fullscreen
stacked
sharefile
streamreader
ws-security
sfdc
janrain
wptoolkit
filepicker
pnotify
dropbox-php
np-complete
media-player
specrun
time-and-attendance
nxt
savon
database-optimization
file-writing
flash-cs5
php-internals
srand
spidermonkey
purge
coveralls
tarjans-algorithm
emailrelay
android-listview
system32
dundas
proj4js
typekit
android-nested-fragment
file-copying
javafx-webengine
asp.net-web-api-odata
typeof
fluentautomation
jplaton
cos
gridcontrol
seed
plasma
eventlistener
flashvars
unc
quickdialog
disclosure
fluent-interface
asp.net-profiles
bespin
thunderbird-lightning
meego
microsoft-virtualization
eqatec
mdac
ajax-forms

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App