Implementing Simple jQuery Slideshow in Blogger

Simple jQuery Slideshow is a very basic Image slider plugin.Its main features include ability to cycles through slides at a time interval that we can set. It also has forward and back buttons so we can jump around between slides and each slide has a title, a description and a link associated with it.






Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C7ZpnnTcmVIPb3wjF-k4JMQf9YhSyhDUhehUoanU3wGy5Peme7K2KqqSxkdeU5VlJliVt2RQeK1fnG2lYm0wxbFLvsSO-05OttZI67lQvkSGDwwHhc1EbTD-tejyn6S2Ay1rhwzhsFfH/s1600/previous.png);
 background-repeat:no-repeat;
 z-index:999;
}
 
#rightNav {
 bottom:26px;
 left:100px;
 width:53px;
 height:26px;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwI-26aPwMT3H_1BOVV9WgVzC2pltHz7Gkix-JLzop9pLolS-3Rjj6-rTYrjbW9DmGBKArrs-xayJa924KWXdyxT6JCNfqwjPzVvAN-F1BR4kT_el14JlG1XBqi9lfF_qO2vw12ocspOh/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>

If the Template shows error while saving this Code ,then Escape the Code, (Click Here to Escape Code)




2.Go to the Post/Page you want to add Simple jQuery Slideshow and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C7ZpnnTcmVIPb3wjF-k4JMQf9YhSyhDUhehUoanU3wGy5Peme7K2KqqSxkdeU5VlJliVt2RQeK1fnG2lYm0wxbFLvsSO-05OttZI67lQvkSGDwwHhc1EbTD-tejyn6S2Ay1rhwzhsFfH/s1600/previous.png);
 background-repeat:no-repeat;
 z-index:999;
}
 
#rightNav {
 bottom:26px;
 left:100px;
 width:53px;
 height:26px;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwI-26aPwMT3H_1BOVV9WgVzC2pltHz7Gkix-JLzop9pLolS-3Rjj6-rTYrjbW9DmGBKArrs-xayJa924KWXdyxT6JCNfqwjPzVvAN-F1BR4kT_el14JlG1XBqi9lfF_qO2vw12ocspOh/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>

4.Now for adding the images into Simple jQuery Slideshow See the following Markup.




<div id="slideshow">
<div id="slideshowWindow">

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide1.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 1</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide3.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 2</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide2.jpg" /> 
<div class="slideText">
<h2 class="slideTitle">
Slide 3</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText--> 
</div><!--/slide--> 
</div><!--/slideshowWindow--> 
</div><!--/slideshow-->



5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!




Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Friday, July 29, 2011
Post a Comment
Anonymous said...

Well,tutorial is bit complicated for me but i like you site design!!

cheers!

April 4, 2012 at 12:17 PM Delete