Modifying an instance

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>

I figured it out.

The property needs to be defined in a callback. See below:


	$(document).ready(function() {
	
		$('.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
			},
			type: 'image', // this is a default type
			callbacks: {
				beforeOpen: function() {
					this.index=popup_index;
				}		
		    }
		});
		
	});