SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Modifying an instance

    In the link below, the first item opens regardless of what product thumbnail is clicked:
    http://resourcefurniture.com/product/ulisse-sofa/

    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

    Code:
    <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>
    Last edited by eruna; Jun 30, 2014 at 08:25. Reason: Clarity

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I figured it out.

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

    Code:
    	$(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;
    				}		
    		    }
    		});
    		
    	});


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •