Results 1 to 3 of 3

Thread: Help With jQuery Plugin

  1. #1
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help With jQuery Plugin

    I wrote this jQuery plugin for a slider carousel. I works If there's only one unordered list on the page but if there are are than one, everything breaks. It applies the plugin to the last list on the page even though I specifically select the actual carousel list.

    here's the plugin code
    Code:
    (function($){
    
    	$.fn.ssCarousel = function(options){
    		var defaults = {
    			speed: 500,
    			leftPosition: '-300px',
    			itemAdjust: 20
    		};
    		
    		var options = $.extend(defaults, options);
    		
    		
    		return this.each(function() {
    			var element = $(this);
    			var item_width = $('li', element).outerWidth() + options.itemAdjust;
    			console.log(element);
    			$('li', element).clone().insertAfter('li:last', element);
    			$('li:first', element).before($('li:last', element));
    			
    			$(element).parent().prev().children('img').click(function(){
    				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 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);
    this is how I'm calling the plugin
    Code:
    <script type="text/javascript">
    	$('.portfolio').ssCarousel();
    </script>
    Any help with this will be appreciated.
    Thanks in advanced
    Last edited by gilgimech; 05-10-2012 at 05:10 AM. Reason: Wrong Code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I tried out this code. Even with only one ul element, it's missing something - css style perhaps?

    In any case though, the problem I think you're describing can be avoided by changing:

    Code:
    $('li', element).clone().insertAfter('li:last', element);
    to:

    Code:
    $('li:last', element).after($('li', element).clone());
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, that seemed to do it.

    Sorry about a live example but, it's on a local development environment.

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
  •