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

Magnific Popup fails to work with multiple galleries on a page
magnific-popup open in parent when calling from iframe
Magnific popup iframe closeOnBgClick does not work
Magnific Popup Text Links
Magnific popup - undefined is not a function when parsing markup
Adding onclose method in magnificPopup (that autoloads on pageload)
Popup does not work fine with final tiles grid gallery
Magnific Popup - Enable zoom animation when using $.magnificPopup.open
Magnific Popup appears below page on mobile
Magnific-popup - Source (not showing up again) after closing Popup
Magnific Popup plugin: Preloader not working on iframe
Close, open new magnific popup window via API
Magnific Popup with html5 video
Magnific Popup Gallery: How can I display a counter in an inline type item?
Magnific Popup - gallery images not displaying
Magnific Popup custom arrow and number

Categories

HOME
openlayers
variables
jdo
bluetooth
asp.net-core
magnific-popup
path-finding
vmware
paw-app
malloc
rubygems
gps
add
nano-server
reveal.js
resize
task
decomposition
ghc
foselasticabundle
evopdf
excel-vba-mac
cx-freeze
tapestry
realex-payments-api
intel-pin
filezilla
procdump
bpel
media-queries
directx-10
titanium-mobile
typed.js
usbserial
revolution-slider
jquery-bootgrid
web-mining
gesture
service-discovery
impersonation
leading-zero
squib
g-code
texmaker
reactive-cocoa-5
convertapi
skeleton-css-boilerplate
auto-update
outlook-2013
jquery-validate
jlink
pebble-watch
dotnetzip
veracode
mplayer
carrot
r-forge
namecoin
zendesk-app
mcafee
nested-sets
probability-density
mongocsharpdriver
angstrom-linux
two-factor-authentication
rtbkit
execute
cartesian-product
citrus-pay
quicklisp
embedded-code
muse
cakephp-3.1
iiviewdeckcontroller
web-controls
lustre
block-device
preferences
heisenbug
starcluster
rtmfp
ember-charts
xsockets.net
dexterity
tidy
buster.js
back-stack
html4
delphi-6
tinn-r
broken-links
cascalog
labwindows
objective-c-2.0
appconkit
qtkit
radcombobox
perfect-hash
ncqrs
microsoft-virtualization
uimenucontroller
temporal-database
private-members
zune
mdac
geneva-server
dbisam

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