Posted By

LukeLux on 09/11/10


Tagged

textmate jquery slideshow


Versions (?)

Jquery - Slideshow


 / Published in: Other
 

  1. // slideshow
  2. var currentPosition = 0;
  3. var slideWidth = 700;
  4. var slides = $('.slide');
  5. var numberOfSlides = slides.length;
  6. // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
  7. $('.slidesContainer').css('overflow', 'hidden');
  8. // Wrap all .slides with #slideInner div
  9. slides // variable slides = .slide
  10. .wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});
  11. // Float left to display horizontally, readjust .slides width
  12. /*
  13. Set #slideInner width equal to total width of all slides
  14. #slideInner wraps all of our slides that has a width equal to total width of all .slide div.
  15. */
  16. $('#slideInner').css('width', slideWidth * numberOfSlides);
  17.  
  18. // Insert left and right controls (with class names of .control) for user navigation;
  19. $('.slideshow')
  20. .prepend('<span class="control" id="leftControl">Move left</span>')
  21. .append('<span class="control" id="rightControl">Move right</span>');
  22.  
  23. // Hide left arrow control on first load
  24. manageControls(currentPosition);
  25.  
  26. // Create event listeners for .controls clicks
  27. $('.control')
  28. .bind('click', function(){
  29. // Determine new position
  30. currentPosition = ($(this).attr('id')=='rightControl')
  31. ? currentPosition+1 : currentPosition-1;
  32.  
  33. // Hide / show controls
  34. manageControls(currentPosition);
  35. // Move slideInner using margin-left
  36. $('#slideInner').animate({
  37. 'marginLeft' : slideWidth*(-currentPosition)
  38. });
  39. });
  40.  
  41. // manageControls: Hides and shows controls depending on currentPosition
  42. function manageControls(position){
  43. // Hide left arrow if position is first slide
  44. if(position==0){ $('#leftControl').hide() }
  45. else{ $('#leftControl').show() }
  46. // Hide right arrow if position is last slide
  47. if(position==numberOfSlides-1){ $('#rightControl').hide() }
  48. else{ $('#rightControl').show() }
  49. }
  50.  
  51. });

Report this snippet  

You need to login to post a comment.