Tutorial to make a simple jQuery image slideshow [Download Code]

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Today we’ll discuss a simple jQuery slideshow in which images slide sideways to give a cool animation. This is probably the most used technique often seen in websites and web applications.

Before we start the tutorial, first make a folder called ‘Tutorial-2’, and a folder inside it called ‘img’. Place 9 images of 1024 x 600px in the ‘img’ folder. Image size can be larger or smaller but we’ve used 1024 x 600px in the tutorial so you better resize images before starting.

Here is how our jQuery slideshow would look like.

Next we design the HTML code for the slideshow,

<body>

<div id='loadingmsg'>Cy-1 jQuery slideshow loading. Please wait... <br><br> <img src='img/l.gif'></div>

<div id='topdiv'>

<div id='middlediv'>

<div id='imagesdiv'>
<img src='img/1.jpg' id='i1'>
<img src='img/2.jpg' id='i2'>
<img src='img/3.jpg' id='i3'>
<img src='img/4.jpg' id='i4'>
<img src='img/5.jpg' id='i5'>
<img src='img/6.jpg' id='i6'>
<img src='img/7.jpg' id='i7'>
<img src='img/8.jpg' id='i8'>
<img src='img/9.jpg' id='i9'>
</div>

</div>

<div id='bottomdiv'>
<a href='#one' id='a1' class='slide'>1</a>
<a href='#two' id='a2' class='slide'>2</a>
<a href='#three' id='a3' class='slide'>3</a>
<a href='#four' id='a4' class='slide'>4</a>
<a href='#five' id='a5' class='slide'>5</a>
<a href='#six' id='a6' class='slide'>6</a>
<a href='#seven' id='a7' class='slide'>7</a>
<a href='#eight' id='a8' class='slide'>8</a>
<a href='#nine' id='a9' class='slide'>9</a>
</div>

</div>

</body>

Here we have ‘topdiv’ div that contains ‘middlediv’ and ‘bottomdiv’ inside it. ‘middlediv’ contain images while ‘bottomdiv’ contains the anchors to the images (number to corresponding images). ‘imagesdiv’ slides left to right and vise-verse to give us the animation.

Next step is to stylize the slideshow, so we put some CSS code,

<style>

body
{
background:black;
text-align:center;
font-family:Tahoma,Arial;
}

h5
{
color:white;
margin:5px;
font-family:Georgia;
}

div#loadingmsg
{
margin-top:250px;
font-size:12px;
color:white;
}

div#topdiv
{
width:1024px;
height:600px;
margin:0px auto;
padding:8px;
border:1px solid #1B1B1B;
display:none;
-webkit-box-shadow:inset 1px 1px 20px 10px #11;
-moz-box-shadow:inset 1px 1px 20px 10px #111;
box-shadow:inset 1px 1px 20px 10px #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

div#middlediv
{
width:1024px;
height:600px;
overflow:hidden;
}

div#imagesdiv
{
width:9216px;
height:600px;
}

div#imagesdiv img
{
float:left;
}

div#bottomdiv
{
padding:6px;
background:#111;
position:absolute;
margin-top:-40px;
margin-left:370px;
font-size:9px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

div#bottomdiv a
{
text-decoration:none;
color:white;
font-family:Tahoma,Arial;
padding:1px;
padding-left:30px;
padding-right:30px;
background:#3090c9;
margin:1px;
}

div#bottomdiv a:hover
{
background:white;
}

div#bottomdiv a.stsp
{
font-size:10px;
padding:5px;
padding-left:15px;
padding-right:15px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

</style>

And the most important part of the entire slideshow tutorial is the jQuery code. First we download jQuery from Google CDN and then build the slideshow using the following code.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script language='Javascript'>

var w=1024;
var h=600;
var anim=1500;
var slideno=0;
var t;
imgs=['a#a1', 'a#a2', 'a#a3', 'a#a4', 'a#a5', 'a#a6', 'a#a7', 'a#a8', 'a#a9'];

anchors=['img#i1', 'img#i2', 'img#i3', 'img#i4', 'img#i5', 'img#i6', 'img#i7', 'img#i8', 'img#i9'];

setTimeout("$('div#loadingmsg').css({'display':'none'});
$('div#topdiv').fadeIn(500);
$('a#a1').trigger('click');",3000);

$('a#a1').click(function(){$('#imagesdiv').animate({'margin-left':'00px','margin-top':'00px'},anim);slideanim(0);});

$('a#a2').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w+'px'},anim);slideanim(1);});

$('a#a3').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*2+'px'},anim);slideanim(2);});

$('a#a4').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*3+'px'},anim);slideanim(3);});

$('a#a5').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*4+'px'},anim);slideanim(4);});

$('a#a6').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*5+'px'},anim);slideanim(5);});

$('a#a7').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*6+'px'},anim);slideanim(6);});

$('a#a8').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*7+'px'},anim);slideanim(7);});

$('a#a9').click(function(){$('#imagesdiv').animate({'margin-left':'-'+w*8+'px'},anim);slideanim(8);});

$('a.slide').click(function(){
$('a').css({'background':'#3090c9','color':'white'});
$(this).css({'background':'white','color':'#3090c9'});
});

function slideanim(ptr)
{
$('img').animate({'opacity':'0.1'},500);
$(anchors[ptr]).animate({'opacity':'1'},100);

if(ptr==8){ptr=-1;}
next=ptr+1;
clearTimeout(t);
t=setTimeout("$(imgs[next]).trigger('click');",5000);
}
</script>

In the code, we first initialize variables, like height and width of the slideshow(and images), time for animation to appear, ids of images and image anchors (number to corresponding images).

The next few lines LOC 18-34 are important. When an image anchor is clicked, the corresponding image is shown. When ‘5’ is clicked, we show the 5th image by moving the ‘imagesdiv’ to right by some distance, and when ‘2’ is clicked, the same div moves to left by some distance.

The function ‘slideanim()’ is responsible for the slideshow. It shows one image after another at a specific time interval. All images are faded at first, and only the current image is shown.

Download the code and run the tutorial on your system.

[Post under updation…]

blog comments powered by Disqus