jQuery Slideshow


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /**
  2.  * jQuery-slideShow
  3.  * Thanks to Ariel Flesler for is jQuery.ScrollShow
  4.  * Date: 10/02/2010
  5.  * @author Christophe LAFFONT
  6.  * @version 1.0
  7.  **/
  8. (function($) {
  9. $.fn.slideShow = function(options){
  10. var defaults = {
  11. view: '.view', // Selector for element (ul) view
  12. navigators:null, // Selector (Next/Prev)
  13. circular:false, // Should the slideshow rewind/advance on the extremes ?.
  14. easing:'linear', // Animation
  15. speed: 500, // Speed
  16. start:0, // Force to start at some position element
  17. ga: false // Google Analytics
  18. };
  19.  
  20. var settings = $.extend(defaults, options);
  21.  
  22. this.each(function() {
  23.  
  24. // SET THE VARIABLES
  25. var
  26. widget = this,
  27. $view = settings.view ? $(settings.view, this) : this,
  28. $elements = $('li', $view),
  29. dim = { w: $elements.outerWidth(true), h: $elements.height() },
  30. limit = $elements.length - Math.ceil($(widget).innerWidth() / dim.w),
  31. $pos = $('#pos'),
  32. active = 0;
  33.  
  34. // Add Google Analytics
  35. if(settings.ga && undefined!==window.pageTracker){
  36. $view.bind('click', function(e){
  37. var href = $(e.target).closest("a").attr('href');
  38. if(href !== undefined){
  39. pageTracker._trackPageview('/external/'+href);
  40. }
  41. });
  42. }
  43.  
  44. // Secure - Check if we have enough elements
  45. if( $elements.length <= limit){
  46. return;
  47. }
  48.  
  49. function sequential( event ){
  50. event.data.pos = active + event.data.dir;
  51. return random( event );
  52. }
  53.  
  54. function animate(pos){
  55. if(settings.easing){
  56. $view
  57. .stop()
  58. .animate(
  59. { marginLeft: -((pos) * dim.w) + 'px' },
  60. { queue: false, duration: settings.speed, easing: settings.easing }
  61. );
  62. }else{
  63. $elements
  64. .hide()
  65. .eq(pos)
  66. .show();
  67. }
  68.  
  69. // Update Position / Total
  70. $pos.html(pos+1 + ' / ' + $elements.length);
  71.  
  72. active = pos;
  73.  
  74. return;
  75. }
  76.  
  77. function random( event ){
  78. var pos = typeof event == 'number' ? event : event.data.pos;
  79.  
  80. if( pos < 0 ){
  81. pos = active === 0 && settings.circular ? limit : 0;
  82. which = 0;
  83. }
  84. else if( pos > limit ){
  85. pos = active == limit && settings.circular ? 0 : limit;
  86. which = 1;
  87. }
  88.  
  89. animate(pos);
  90.  
  91. active = pos;
  92.  
  93. return false;
  94. }
  95.  
  96. // CLICK
  97. $(settings.navigators,widget)
  98. .show()
  99. .find('a')
  100. .eq(0).bind('click.prev', { dir: -1 }, sequential ).end()
  101. .eq(1).bind('click.next', { dir: +1 }, sequential );
  102.  
  103. // INIT
  104. if( settings.start !== null ){
  105. random( settings.start );
  106. }
  107.  
  108. });
  109. };
  110.  
  111. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.