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

Question

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!

Answer 1

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 below
<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
});