PDA

View Full Version : Resolved Help With jQuery Plugin



gilgimech
05-10-2012, 12:31 AM
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

(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

<script type="text/javascript">
$('.portfolio').ssCarousel();
</script>

Any help with this will be appreciated.
Thanks in advanced

jscheuer1
05-10-2012, 04:47 AM
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:


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

to:


$('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.

gilgimech
05-10-2012, 05:10 AM
Thanks, that seemed to do it.

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