scribble

Scribble

About Blog GitHub

29 Jul 2011
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(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>

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(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>

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!




Til next time,
Prayag Verma at 10:25

scribble

About Blog GitHub