magnific-popup


Add data to items in Magnific Popup


I want to add additional data to go along with each additional item in a gallery, in this case a project name in addition to the caption. I have a working version on Codepen (also below) using the markupParse callback and storing the Project Name info in a separate array, but it seems like there is probably a more efficient method using the Magnific Popup API. Is there a way to store this information with the item object, maybe even have the rendered html be cached?
In the sample code I have created an extra div called <div class="my-project"></div> inside the markup variable and place the the Project Name data from the galleryProject array using the markupParse callback.
$('#gallery').magnificPopup({
type: 'image',
items: [
{
src: 'img1.jpg',
title: 'Caption 1'
},
{
src: 'img2.jpg',
title: 'Caption 2'
},
{
src: 'img3.jpg',
title: 'Caption 3'
}
],
gallery: {
enabled: true
},
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="my-project"></div>'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
},
callbacks: {
markupParse: function(template, values, item) {
var index = this.currItem.index;
template.find('.my-project').html( galleryProject[index] );
}
}
});
var galleryProject = ['Project 1','Project 2','Project 3'];
You're right, this is much simpler way:
$('#gallery').magnificPopup({
type: 'image',
items: [
{
src: 'img1.jpg',
title: 'Caption 1',
project: 'Project 1'
},
{
src: 'img2.jpg',
title: 'Caption 2',
project: 'Project 2'
},
{
src: 'img3.jpg',
title: 'Caption 3',
project: 'Project 3'
}
],
gallery: {
enabled: true
},
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-project"></div>'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});

Related Links

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
magnific popup Inline Lightbox Gallery how to specify item in array from html link
how to make browser back close magnific-popup
Simple Magnific Popup Gallery not working
Magnific Popup onload calling a url
callbacks not firing when opening a magnific popup from another one
Magnific Popup - taller mfp-bottom-bar causes max image height issue
How to generate a (magnific popup)-gallery without a-tags
Add data to items in Magnific Popup
How to set the divs to make Magnific Popup animations work

Categories

HOME
testing
multithreading
cloud
deployment
netsuite
amazon-ec2
magnific-popup
urbancode
framework7
angular-ui-bootstrap
fingerprint
ojdbc
serverspec
enterprise-library-5
bs4
virtualization
basic
correlation
jplayer
footer
serilog
visjs
arabic
wijmo
firebase-crash-reporting
java-7
android-widget
intel-pin
strncpy
wtx
librato
fabric8
oracle-fusion-middleware
ioio
typed.js
wixsharp
http-digest
suricata
bitbucket-pipelines
abstract-class
squib
android-tabhost
keydown
mime
angular2-meteor
dandelion
ionicons
datastax-startup
idisposable
forever
nsarray
sybase-asa
blacklist
migradoc
google-cdn
objective-c-swift-bridge
parallel-data-warehouse
wdf
probability-density
sts-springsourcetoolsuite
multi-level
py2app
natvis
intel-fortran
lemon
comobject
ios9.1
proj4js
skos
truevault
sorl-thumbnail
has-many-through
hippomocks
bundles
oracle-warehouse-builder
interface-orientation
gdata-api
javaspaces
wse3.0
cufon
whoosh
fireworks
window-management
stage
coercion
xmemcached
cxxtest
exchange-server-2003
data-acquisition
3gp

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