29 Jul 2011

Implementing Simple jQuery Slideshow in Blogger

<style type="text/css"> 
#slideshow #slideshowWindow {
 width:500px;
 height:257px;
 margin:0;
 padding:0;
 position:relative;
 overflow:hidden;
}
 
#slideshow #slideshowWindow .slide {
 margin:0;
 padding:0;
 width:500px; 
 height:257px;
 position:relative;
}
 
#slideshow #slideshowWindow .slide .slideText {
 position:absolute;
 top:130px;
 left:0px;
 width:100%;
 height:130px;
 background-image:url(greyBg.png);
 background-repeat:repeat;
 margin:0;
 padding:0;
 color:#ffffff;
 font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
 
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
 color:#ffffff;
 text-decoration:none;
}
 
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
 margin:10px 0 0 10px;
 padding:0;
}
 
/*Navigation*/
.nav {
 display:block;
 text-indent:-10000px;
 position:absolute;
 cursor:pointer;
}
 
#leftNav {
 bottom:18px;
 left:0px;
 width:94px;
 height:34px;
 background-image:url(http://1.bp.blogspot.com/-Iab-OBSmo_g/TjJ8HccSM0I/AAAAAAAAA2E/4luzTVm76s4/s1600/previous.png);
 background-repeat:no-repeat;
 z-index:999;
}
 
#rightNav {
 bottom:26px;
 left:100px;
 width:53px;
 height:26px;
 background-image:url(http://1.bp.blogspot.com/-g7zq7ghqx00/TjJ8G2Dxl2I/AAAAAAAAA2A/pHOd-5VR90Y/s1600/next.png);
 background-repeat:no-repeat;
 z-index:999;
}
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
          
  var currentPosition = 0;
  var slideWidth = 500;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideShowInterval;
  var speed = 3000;
 
  //Assign a timer, so it will run periodically
  slideShowInterval = setInterval(changePosition, speed);
  
  slides.wrapAll('<div id="slidesHolder"></div>')
    
  slides.css({ 'float' : 'left' });
  
  //set #slidesHolder width equal to the total width of all the slides
  $('#slidesHolder').css('width', slideWidth * numberOfSlides);
  
  $('#slideshow')
   .prepend('<span class="nav" id="leftNav">Move Left</span>')
   .append('<span class="nav" id="rightNav">Move Right</span>');
  
  manageNav(currentPosition);
  
  //tell the buttons what to do when clicked
  $('.nav').bind('click', function() {
   
   //determine new position
   currentPosition = ($(this).attr('id')=='rightNav')
   ? currentPosition 1 : currentPosition-1;
          
   //hide/show controls
   manageNav(currentPosition);
   clearInterval(slideShowInterval);
   slideShowInterval = setInterval(changePosition, speed);
   moveSlide();
  });
  
  function manageNav(position) {
   //hide left arrow if position is first slide
   if(position==0){ $('#leftNav').hide() }
   else { $('#leftNav').show() }
   //hide right arrow is slide position is last slide
   if(position==numberOfSlides-1){ $('#rightNav').hide() }
   else { $('#rightNav').show() }
  }
 
  
  //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
  function changePosition() {
   if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
    manageNav(currentPosition);
   } else {
    currentPosition  ;
    manageNav(currentPosition);
   }
   moveSlide();
  }
  
  
  //moveSlide: this function moves the slide 
  function moveSlide() {
    $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
  }
 
 });
</script>