magnific-popup


magnific popup Inline Lightbox Gallery how to specify item in array from html link


Wanted to use this 'item' example:
http://codepen.io/dimsemenov/pen/sHoxp
but instead of having one button, I'd like to have multiple buttons for each inline element (like a gallery).
For example, How would I create a second button that would open data array item 2 (paul irish)? Is there a way to specify from the button link? thanks!
I had to do something similar and had no idea how to do it so hopefully this helps someone later.
All my modals were inline but I also needed a list for each item on the page so you could click on the link and it would open at Item 2 or 3 etc..but still allow you to navigate through the gallery. I based my code off this http://codepen.io/dimsemenov/pen/zvLny and added the additional parts for the id's.
Basically you just have to put a data attribute e.g data-slideid on the individual links and pass that through when you open magnific. After you set everything you can specify which item it opens at by passing through the value from data-slideid. If anyone has a better solution i'd love to know!
Check out my code on codepen or below - http://codepen.io/mandymichael/pen/Pwmwdr/
<div id="gallery1" class="mfp-hide">
<div class="slide" data-slideid="0">slide 1</div>
<div class="slide" data-slideid="1">slide 2</div>
<div class="slide" data-slideid="2">slide 3</div>
</div>
// single link opens gallery starting at first slide
<p>view gallery</p>
// individual links opens gallery starting at relevant slide
Slide1
Slide2
Slide3
$('.open-gallery-link').click(function() {
var itemNum = $(this).data("slideid"); // get the id
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
},itemNum); // set it in here
});

Related Links

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
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

Categories

HOME
cakephp
sendgrid
wso2-am
reflection
dictionary
homebrew
youtube-dl
analysis
twitter-bootstrap-4
ip
baqend
cross-browser
enterprise-library-5
onelogin
convolution
ios-charts
session-variables
gnupg
midi
izpack
export-to-csv
n-gram
fortumo
pugjs
flux
normalizr
swingx
grails3
chromium-embedded
kudan
buildbot
sparse-matrix
chromebook
filezilla
fopen
typo3-6.2.x
assistant
kendo-datasource
gsoap
nameservers
create-table
usbserial
io-redirection
disassembling
jquery-bootgrid
swisscomdev
hockeyapp
espeak
android-browser
sharefile
xenforo
no-www
modelmapper
businessworks
babel-core
azure-application-gateway
apache-fop
pubmed
boost-multi-index
integrity
slickedit
windows-iot-core-10
cudafy.net
hittest
dwscript
blacklist
quartz-composer
eventkit
specrun
infix-notation
impresspages
master-slave
qgraphicsview
freedesktop.org
r-tree
execute
sdhc
0xdbe
php-ci
method-parameters
sortedlist
formatjs
typekit
google-reader
uitouch
funcunit
intentservice
commoncrypto
sitemesh
soundtouch
trusted
viewswitcher
appconkit
nsdatecomponents
gwt-ext
xmemcached
recent-documents
android-sdk-2.1
google-friend-connect
h.323
dmx512
windows-live-messenger
lzh

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