Implementing Simple jQuery Slideshow in Blogger

Posted by ambenriyek at 3:25 AM
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/AVvXsEg1diZnjwQRXHejRHIQNsnujJetsBgiIrSBI4pAwLk4FYIbcBXs5izlF1Qsra7W3Fh15B2XoUzHcL9wRKBF-ICiXdIY9_sd7eMx6LhbXX45f6lXqSago3r1bL3uMhs8x7A6vHlYjeOO_wlz/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/AVvXsEjS_8s8CDfzeBl0JzgV9e8iK_So_UDGnTDFATqwGGH3urfPFePWpUzj_KClHO1DxrE92M65sM3HcVsJhqNRk9oKzn45HB_nSUyv_RFk0eo4lhCSixrC53SVvuCMR47Pk8IQByGTv3BF_hXY/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/AVvXsEg1diZnjwQRXHejRHIQNsnujJetsBgiIrSBI4pAwLk4FYIbcBXs5izlF1Qsra7W3Fh15B2XoUzHcL9wRKBF-ICiXdIY9_sd7eMx6LhbXX45f6lXqSago3r1bL3uMhs8x7A6vHlYjeOO_wlz/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/AVvXsEjS_8s8CDfzeBl0JzgV9e8iK_So_UDGnTDFATqwGGH3urfPFePWpUzj_KClHO1DxrE92M65sM3HcVsJhqNRk9oKzn45HB_nSUyv_RFk0eo4lhCSixrC53SVvuCMR47Pk8IQByGTv3BF_hXY/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!


Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
© 2009 Blogger Tips 2013 | Powered by Blogger