/ Published in: jQuery
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/** * jQuery-slideShow * Thanks to Ariel Flesler for is jQuery.ScrollShow * Date: 10/02/2010 * @author Christophe LAFFONT * @version 1.0 **/ (function($) { $.fn.slideShow = function(options){ var defaults = { view: '.view', // Selector for element (ul) view navigators:null, // Selector (Next/Prev) circular:false, // Should the slideshow rewind/advance on the extremes ?. easing:'linear', // Animation speed: 500, // Speed start:0, // Force to start at some position element ga: false // Google Analytics }; var settings = $.extend(defaults, options); this.each(function() { // SET THE VARIABLES var widget = this, $view = settings.view ? $(settings.view, this) : this, $elements = $('li', $view), dim = { w: $elements.outerWidth(true), h: $elements.height() }, limit = $elements.length - Math.ceil($(widget).innerWidth() / dim.w), $pos = $('#pos'), active = 0; // Add Google Analytics if(settings.ga && undefined!==window.pageTracker){ $view.bind('click', function(e){ var href = $(e.target).closest("a").attr('href'); if(href !== undefined){ pageTracker._trackPageview('/external/'+href); } }); } // Secure - Check if we have enough elements if( $elements.length <= limit){ return; } function sequential( event ){ event.data.pos = active + event.data.dir; return random( event ); } function animate(pos){ if(settings.easing){ $view .stop() .animate( { marginLeft: -((pos) * dim.w) + 'px' }, { queue: false, duration: settings.speed, easing: settings.easing } ); }else{ $elements .hide() .eq(pos) .show(); } // Update Position / Total $pos.html(pos+1 + ' / ' + $elements.length); active = pos; return; } function random( event ){ var pos = typeof event == 'number' ? event : event.data.pos; if( pos < 0 ){ pos = active === 0 && settings.circular ? limit : 0; which = 0; } else if( pos > limit ){ pos = active == limit && settings.circular ? 0 : limit; which = 1; } animate(pos); active = pos; return false; } // CLICK $(settings.navigators,widget) .show() .find('a') .eq(0).bind('click.prev', { dir: -1 }, sequential ).end() .eq(1).bind('click.next', { dir: +1 }, sequential ); // INIT if( settings.start !== null ){ random( settings.start ); } }); }; })(jQuery);