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

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

Categories

HOME
pycharm
angular-material
fme
razor
microservices
graphql
rdf
blueprintjs
acquia
directx
imacros
alignment
fortumo
fallback
ups
conemu
mustache.php
emgucv
android-widget
xpages-ssjs
javacv
react-css-modules
web-api-testing
applozic
madlib
preg-match
contact-form
google-sites-2016
mozilla
picasso
wpf-controls
devextreme
impersonation
android-fingerprint-api
cookiecutter-django
particles.js
node-gyp
import-from-excel
acoustics
convertapi
python-c-api
hls.js
dropbox-php
tropo
lift-json
google-perftools
namecoin
spring-mongodb
titanium-android
migradoc
angular-strap
word-vba-mac
transmitfile
plottable.js
associative-array
r-tree
execute
eclipse-clp
fouc
iis-arr
nsight
graph-api-explorer
streambase
inmobi
geonetwork
c3
codeigniter-url
applescript-objc
kgdb
mechanize-ruby
resty-gwt
typo3-neos
geos
access-rights
eventual-consistency
html-editor
drools-planner
gil
tridion-worldserver
onsubmit
assembly-loading
gnu-prolog
zpt
rfc1123
disclosure
actionview
google-friend-connect
blitz++
gamma
suppress
boost-smart-ptr

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