In the link below, the first item opens regardless of what product thumbnail is clicked:
The item order can be defined with the Magnific Popup “index” property. The original popup_index variable opens the matching item, and the popup_index is defined correctly after a link is clicked. But I can’t figure out how to change the “index” property in the Magnific instance after a link is clicked. If anyone can shed some light on this, I would really appreciate it.
E
<script>
$(document).ready(function() {
//define index property
popup_index=0;
//change index property after link is clicked
$('.product_thumbnails a').click(function(){
popup_index=$('.product_thumbnails a').index($(this));
});
$('.images').magnificPopup({
items: [
{
src: 'www.youtube.com/watch?v=kXMrAsiNx_0',
type: 'iframe' // this overrides default type
}
,{
src: 'http://sandbox.resourcefurniture.com/rf-content/uploads/2014/02/Ulisse-Sofa-3.jpg',
title: 'Ulisse Sofa closed'
}
,{
src: 'http://sandbox.resourcefurniture.com/rf-content/uploads/2014/02/Ulisse-Sofa-4.jpg',
title: 'Ulisse Sofa open'
}
,{
src: 'http://sandbox.resourcefurniture.com/rf-content/uploads/2014/02/Ulisse-Sofa-2.jpg',
title: 'Ulisse Sofa open detail'
} ],
gallery: {
enabled: true
},
index: popup_index,
type: 'image' // this is a default type
});
});
</script>