How to add a jquery image slider to your blogger powered blog

In this tutorial you will learn how to add a simple jquery image slider to your blogger powered blog note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure whether yours is disabled or not check the demo you should see a working image slider also all the images must be the exact same size as each other.

I recommend you download a backup copy of your template or use a test blog I'm going to use a 3 column template from my previous tutorial but it should work with any template now we need to download two scripts named jquery.js and s3Slider.js you can read more and download the scripts from this link or just grab the embedded source code from the demo.


Once you have the two scripts you can either upload them to your server or embed the scripts directly in the page i will show you both ways the first assuming that you have uploaded them to your server

go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the direct link to the scripts if you have them on your own server

<script src='http://./jquery.js' type='text/javascript'/>
<script src='http://./s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

otherwise if you do not have the scripts on your own server paste the following code just before the closing </head> tag

<script type='text/javascript'>
//<![CDATA[
/* paste contents of your scripts here */
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

replacing the red comment with the full contents of the scripts you downloaded by opening them with a simple text editor the code in green is to set the duration of how long will one picture be shown on the page in milliseconds.

Once you have the scripts installed add the following CSS code adjusting the parts highlighted in red to the exact width and height of your images


#slider1 {
width:525px; /* To be same as image width */
height:237px; /* To be same as image height */
position: relative;
overflow: hidden;
border:1px solid #eee;
margin:0 auto;
}

#slider1Content {
width:525px; /* To be same as image width or wider */
position: absolute;
top: 0;
list-style:none;
margin:0;
padding:0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width:550px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom:0;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size:14px;
}

Now save your template then go to the page element tab and add a html/javascript widget just above the post and leave the title field empty with the following xhtml code in

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<a href='http://myblogpost.html'>
<img alt="my image" src="http://tinypic.com/5xpc1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<li class="slider1Image">
<a href='http://someblogpost.html'>
<img alt="some image" src="http://tinypic.com/5fde1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<div class="clear slider1Image"></div>
</ul>
</div>

In the code above i have added two images if you would like more it's just a matter of copying one of the blocks of code in between the <li></li> tags so the first part highlighted in green is the link to your blog post while the code highlighted in red is the direct link to the image and the blue text is the title and description of your image so now you should have a working image slider you can also have the caption coming in from the top, left or right side of the images i recommend you read more about it on the authors site.

Thanks for reading comments are welcome see my result