Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts

    Multiple instances of Plugin

    I wrote this plugin for a simple slider.

    Code:
    (function($) {
        $.fn.ssCarousel = function(options) {
    		 var defaults = {  
    			speed        : 500,
    		  	itemWidth    : '220px',
    		  	itemAdjust   : 20,
    			easingType   : 'easeInCirc',
    			leftButton   : '',
    			rightButton   : '',
    		};  
    		options = $.extend({},defaults, options);
    
    		var element = $(this);
    		
    		console.log(element);
    		
    		return this.each(function() {
    			$('li', element).clone().insertAfter('li:last', element);
    			$('li:first', element).before($('li:last', element));
    			jQuery.easing.def = options.easingType;
    			
    			$('img', options.leftButton).click(function(){
    				var item_width = $('li', element).outerWidth() + options.itemAdjust;
    				var left_indent = parseInt($(element).css('left')) - item_width;
    				$(element).animate({'left' : left_indent},options.speed,function(){
    					$('li:last', element).after($('li:first', element));
    					$(element).css({'left' : '-'+options.itemWidth});
    				}); 
    			});
    			$('img', options.rightButton).click(function(){
    				var item_width = $('li', element).outerWidth() + options.itemAdjust;
    				var left_indent = parseInt($('.ss-carousel').css('left')) + item_width;
    				$(element).animate({'left' : left_indent},options.speed,function(){            
    				$('li:first', element).before($('li:last', element)); 
    				$(element).css({'left' : '-'+options.itemWidth});
    				});
    			});
    		});
        };
    })(jQuery);
    Code:
    <div id="carousel">
    
        <div id="carousel-left-btn" class="carousel-btn ssc-left-btn">
            <img src="images/left.png" />
        </div>
        
        <div id="carousel-container">
            
            <ul id="carousel-ul-1" class="ss-carousel">
            
                <li><a href="#"><img src="images/DP-650S-01.jpg" /></a></li>
                <li><a href="#"><img src="images/DP-650S-02.jpg" /></a></li>
                <li><a href="#"><img src="images/DP-650S-03.jpg" /></a></li>
                <li><a href="#"><img src="images/DP-650S-04.jpg" /></a></li>
                <li><a href="#"><img src="images/DP-650S-05.jpg" /></a></li>
                
            </ul>
            
        </div>
        
        <div id=carousel-right-btn" class="carousel-btn ssc-right-btn">
            <img src="images/right.png" />
        </div>
    
    </div>
    
    
    <script type="text/javascript">
    	$('#carousel-ul').ssCarousel({
    			leftButton   : '#carousel-left-btn',
    			rightButton   : '#carousel-right-btn',
    		});
    </script>
    this works fine, but what I want to do is eliminate the leftButton and rightButton options, but I can't figure out how to get it to work for multiple instances of the the plugin.

    If I have two instances and I click one of the buttons. It controls both sliders.

    How can I get it to work for each individual slider
    Last edited by gilgimech; 05-04-2012 at 11:48 AM. Reason: Resolved

  • #2
    New Coder
    Join Date
    Mar 2010
    Posts
    58
    Thanks
    10
    Thanked 3 Times in 3 Posts
    OK I got this figured out.

    Here's the code

    Code:
    (function($){
    
    	$.fn.ssCarousel = function(options){
    		var defaults = {
    			easingType: 'easeInCirc',
    			speed: 500,
    			leftPosition: '-300px',
    			itemAdjust: 20
    		};
    	
    		var options = $.extend(defaults, options);
    		
    		return this.each(function() {
    			var element = $(this);
    				
    			$('li', element).clone().insertAfter('li:last', element);
    			$('li:first', element).before($('li:last', element));
    			jQuery.easing.def = options.easingType;   
    				
    			$(element).parent().prev().children('img').click(function(){
    				var item_width = $('li', element).outerWidth() + options.itemAdjust;
    				var left_indent = parseInt($(element).css('left')) - item_width;
    				$(element.not(':animated')).animate({'left' : left_indent},options.speed,function(){
    					$('li:last', element).after($('li:first', element)); 
    					$(element).css({'left' : options.leftPosition});
    				}); 
    			});
    			
    			$(element).parent().next().children('img').click(function(){
    				var item_width = $('li', element).outerWidth() + options.itemAdjust;
    				var left_indent = parseInt($(element).css('left')) + item_width;
    				$(element.not(':animated')).animate({'left' : left_indent},options.speed,function(){           
    				$('li:first', element).before($('li:last', element)); 
    				$(element).css({'left' : options.leftPosition});
    				});
    			});
    			
    		});
    	};
    })(jQuery);


  •  

    Posting Permissions

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