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 custom arrow and number
Is it possible to pass data via the post method to magnific popup when ajax loading content?
What is the best way to test if a Magnific Popup is currently “open”
Apply callback to all instances of Magnific Popup?
Magnific Popup show background image while loading fullres image
Popup - It should load an .aspx page
Modal dialog. - Confusing
Toggle verticalFit on an open image?
Does Magnific Popup support custom events/buttons
I can't get the overflowY option to work in magnific popup
magnific popup group do not working
Magnific-popup: how to get image url from <img src=“…”>?
Styling magnific-popup arrows
magnific popup modal closes on click
Magnific popup: getting “The image could not be loaded”
How to give a fixed size to image in magnific-popup pluggin

Categories

HOME
jdo
path-finding
jira
session-variables
floating-action-button
quicklook
apache-cayenne
dtrace
hex-editors
carthage
django-simple-history
serilog
facebook-instant-articles
accessor
sparse-matrix
fish
status
greendao
typo3-6.2.x
xacml
jspm
bpel
key-value-observing
wpf-controls
bitbucket-pipelines
eclipse-scout
sfdc
core-plot
ibpy
estimote
password-encryption
wptoolkit
skeleton-css-boilerplate
wso2carbon
outlook-2013
apache-fop
tizen-native-app
git-diff
slickedit
akka-cluster
arrow-keys
mcafee
or-tools
visual-c++-2008
firmata
instant
passport-google-oauth
thrust
etsy
impresspages
clang-static-analyzer
angstrom-linux
react-native-listview
php-internals
asp.net5
lib.web.mvc
teamcity-8.0
ora-00900
google-places
ionic
fluid-dynamics
remobjects
c++03
npapi
sorl-thumbnail
operator-precedence
tween
jscript.net
socketexception
elliptic-curve
reactfx
hyprlinkr
industrial
xsockets.net
ora-00911
cos
eventlistener
enterprisedb
jquery-knob
uiviewanimation-curve
adk
doh
infobox
coredump
psi
blitz++
dentrix
webkit.net
iweb
kdbg
backcolor
spec#
rtml
caching-application-block
misv

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