Tutorial to make a unique image slideshow in jQuery [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

You must have seen a number of good jQuery slideshows, but the one we’re showing today is really unique. The first good thing about this slideshow is that it’s build on a simple idea yet you’ll find it new to your eyes. And the second thing is the code which is so small that you can understand in bits with a basic understanding of jQuery (HTML, JavaScript and CSS) concepts.

Before moving onto the tutorial, first check out the slideshow in action.

The tutorial

As you can see in the demo, images slide up-down, right-left providing an awesome animation.

The core idea lies in the HTML code for slideshow. Here we have a 4 divs: topmost div ‘framearea’ contains other three divs inside it. ‘framearea’ basically works as cover to the entire slideshow. The second div ‘totalarea’ is where images and the animation appears. The height and width of these two divs are defined and the ‘overflow:hidden’ CSS property makes sure we see only the image that’s within the perimeter of the div ‘totalarea’. The third div #displayarea is where all images are contained. Its width and height are defined and images are placed next to each other. And the fourth ‘slidebuttons’ hold 1, 2, 3 …. anchors to corresponding images.

The HTML Code


<head>
<title>Cy-2 jQuery Slideshow</title>
</head>
<body>

<h5>Cy-2 jQuery slideshow</h5>

<div id='loadingmsg'>Loading. Please wait... <br><br> <img src='img/l.gif'></div>

<div id='framearea'>

<div id='totalarea'>

<div id='displayarea'>
<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='label'></div>

<div id='slidebuttons'>
<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>

Now see the infography below it to better understand the entire HTML code. Here we displayed how the ‘framearea’, ‘totalarea’ and ‘displayarea’ divs are placed.

make unique jquery slidehow plugin for web projects

The CSS Code

This is the CSS portion that stylizes the entire slideshow. Here we set the size of container divs, the slideshow buttons and the text appearing with the images.


<style>

body
{
background:url('img/bg-top.png');
text-align:center;
font-family:Tahoma,Arial;
}

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

div#framearea
{
width:1024px;
height:650px;
padding:10px;
padding-right:20px;
padding-left:20px;
margin:0px auto;
display:none;
border:1px solid #777;
-webkit-box-shadow:1px 1px 15px 1px #777;
-moz-box-shadow:1px 1px 15px 1px #777;
box-shadow:1px 1px 15px 1px #777;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

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

div#displayarea
{
width:3072px;
height:1800px;
}

div#totalarea img
{
width:1024px;
height:600px;
float:left;
}

div#label
{
position:absolute;
width:1008px;
margin-top:-80px;
height:34px;
margin-left:8px;
display:none;
}

div#label p.info
{
margin:10px;
font-family:Georgia, Arial;
font-size:15px;
font-weight:bold;
color:white;
text-align:center;
}

div#slidebuttons
{
margin:20px;
margin-top:12px;
padding:4px;
height:22px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

div#slidebuttons a
{
text-decoration:none;
color:white;
font-size:10px;
font-family:Tahoma;
padding:4px;
padding-right:30px;
padding-left:30px;
background:#101010;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

div#slidebuttons a:hover
{
background:red;
}

</style>

The jQuery Code

This is the code that controls the animation. Read the code first and then see its explanation below,


<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'];

labels=[
'To succeed in life, you need two things: ignorance and confidence. ',
'Where there is love there is life.',
'To be idle is a short road to death and to be diligent is a way of life; foolish people are idle, wise people are diligent.',
'To live a pure unselfish life, one must count nothing as his own in the midst of abundance.',
'The quality, not the longevity, of life is what is most important.',
'You have enemies? Good. That means you have stood up for something, sometime in your life.',
'Only a life lived for others is a life worthwhile.',
'Our prime purpose in this life is to help others. And if you cannot help them, at least do not hurt them.',
'The main purpose of life is to live rightly, think rightly, act rightly. The soul must languish when we give all our thought to the body.'
];

setTimeout("$('div#loadingmsg').css({'display':'none'}); $('div#framearea').fadeIn(2000); $('a#a1').trigger('click');",6000);

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

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

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

$('a#a4').click(function(){$('#displayarea').animate({'margin-left':'00px','margin-top':'-'+h+'px'},anim);textanim(3);});

$('a#a5').click(function(){$('#displayarea').animate({'margin-left':'-'+w+'px','margin-top':'-'+h+'px'},anim);textanim(4);});

$('a#a6').click(function(){$('#displayarea').animate({'margin-left':'-'+w*2+'px','margin-top':'-'+h+'px'},anim);textanim(5);});

$('a#a7').click(function(){$('#displayarea').animate({'margin-left':'00px','margin-top':'-'+h*2+'px'},anim);textanim(6);});

$('a#a8').click(function(){$('#displayarea').animate({'margin-left':'-'+w+'px','margin-top':'-'+h*2+'px'},anim);textanim(7);});

$('a#a9').click(function(){$('#displayarea').animate({'margin-left':'-'+w*2+'px','margin-top':'-'+h*2+'px'},anim);textanim(8);});

$('a.slide').click(function(){$('a.slide').css({'background':'#101010'}); $(this).css({'background':'red'});});

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

$('div#label').hide();
$('div#label').html("<p class='info'>"+labels[ptr]+"</p>");
$('div#label').fadeIn(2000);

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

</script>

1. Initializing variables

1. Width(w) and height(h) of the images.

2. Time(anim) for animation to appear.

3. Pointer(slideno) to mark images from 0 to 8.

4. Array(anchors) containing ids of all images anchors. Each image has a corresponding number (called anchor).

5. Array(imgs) containing ids of all images.

6. Array(labels) containing text to display with corresponding images.

2. Starting Slideshow and animation

[LOC 26] Removing the initial ‘Cy-2 jQuery slideshow loading. Please wait…’ message and displaying the slideshow after 5 seconds. The images load in the meanwhile.

[LOC 28-44] When image anchor (the numbers for each image) are clicked, the div ‘displayarea’ shifts by some distance which is a multiple of height and width. To go from 1st image to 4th, we go down by h*2. To go from 1st to 5th we go down by w*2 and right by -h*2.

[LOC 46] Styling the anchor of the active image.

[LOC 50-51] Fading all images except the active image.

[LOC 53-55] Showing the text for images with smooth animation effect. All texts are taken from the ‘labels’ array.

[LOC 57-61] Showing one image one after another to give a slideshow effect.

Download code

You can always download the code to better understand the jQuery slideshow plugin. Also, you can work upon it to make better.

Please tell if the tutorial is good and easy to understand. Also, mention you suggestions or queries in the comments below.

blog comments powered by Disqus