Simple jquery image slider with source code and explanation


Use of image slider are very common now a days. Almost every site uses it in their home page or in their gallery section. There are thousands of free image sliders available in the web. Most of the time we just pick up a good looking image slider and place it in the site. It really looks good  but the problem starts when client wants changes in that slider or he wants to customize it according to his liking. Then we have two options

1. Start looking for a new slider which matches his needs

2. Modify the existing one. But for that we need to understand how that slider is working or its functionality.

In my opinion the second option is lot better. That is why I am giving all the source code (html, css, jquery ) here. See the demo

Do not forget to have jquery-1.3.1.min.js file in your js folder.

Here is the full code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Image Slider</title>

The jquery
<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow(){
//Set the opacity of all images to 0
$(‘#fullgallery a’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$(‘#fullgallery a:first’).css({opacity: 1.0});

//Set the caption background to semi-transparent
$(‘#fullgallery .caption’).css({opacity: 0.7});

//Resize the width of the caption according to the image width
$(‘#fullgallery .caption’).css({width: $(‘#fullgallery a’).find(‘img’).css(‘width’)});

//Get the caption of the first image from REL attribute and display it
$(‘#fullgallery .content’).html($(‘#fullgallery a:first’).find(‘img’).attr(‘rel’)).animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘myGallery()’,6000);

}

function myGallery(){
//if no IMGs have the show class, grab the first image
var current = ($(‘#fullgallery a.show’)?  $(‘#fullgallery a.show’) : $(‘#fullgallery a:first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#fullgallery a:first’) :current.next()) : $(‘#fullgallery a:first’));

//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass(‘show’);

//Set the opacity to 0 and height to 1px
$(‘#fullgallery .caption’).animate({opacity: 0.0}/* { queue:false, duration:0 }).animate({height: ‘0px’}, { queue:true, duration:300 }*/) ;

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#fullgallery .caption’).animate({opacity: 0.7},100 )/*.animate({height: ‘100px’},500 )*/;

//Display the content
$(‘#fullgallery .content’).html(caption);
}

</script>

The CSS
<style type=”text/css”>

body{ font-family:Arial, Helvetica, sans-serif}

#fullgallery{
height:360px;
position:relative;
float:left;
}
#fullgallery a{
float:left;
position:absolute;
}
#fullgallery a img {
border:none;
}
#fullgallery a.show {
z-index:1;
}
#fullgallery .caption {
z-index:2;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#fullgallery .caption .content {
margin:5px;
}
#fullgallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

</style>
</head>

The Markup

<body>
<div id=”fullgallery”>

<a href=”#” class=”show”>
<img src=”images/mother_nature.jpg” alt=”Mother Nature” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Mother Nature</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. “/>
</a>
<a href=”#”>
<img src=”images/lonely.jpg” alt=”Lonely” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>lonely</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. “/>
</a>

<a href=”#”>
<img src=”images/sweet_home.jpg” alt=”Sweet Home” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Sweet Home</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.”/>
</a>

<a href=”#”>
<img src=”images/never_ending.jpg” alt=”Never Ending” width=”580″ height=”360″ title=”” alt=”” rel=”<h3>Never Ending</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”/>
</a>
<div class=”caption”><div class=”content”></div></div>
</div>
<div></div>
</body>
</html>

Copy paste the full code in your favorite text editor, see the result and start tweaking as you want .This is a very simple image slider look-wise and functionality-wise but my aim is to understand the simple thing first so that we can build a more complex image slider  easily because we know exactly where and how we need to do the changes.

Because of the wordpress policy I could not upload the zip file containing all the files. Tese are the 4 images I used , you can use anuy Images you want. Enjoy reading.

Advertisements

19 responses to this post.

  1. Posted by lakshmikanth on March 10, 2012 at 4:59 pm

    Hello sir,

    It is really great contribution for upcoming software professionals… I would like to request you please spend your spare your time to the knowledge contribution, and post more articles…

    thank you

    Reply

  2. Thanks, I am starting my blog again :), thanks again for the inspiration.

    Reply

    • when i entered above code in visual studio 2008 there are some errors and also please mention where to place css file and where to close head
      please make it possible as soon as.
      waiting your reply

      Reply

  3. Posted by Dev on May 2, 2012 at 11:28 am

    Thanks Sir

    Reply

  4. Posted by sar on May 29, 2012 at 10:21 am

    sir , i not understand ur programe copy not working …

    Reply

  5. Posted by irfan on June 3, 2012 at 4:30 pm

    where is your images folder

    Reply

  6. I have been checking out a few of your posts and i must say pretty nice stuff.
    I will make sure to bookmark your site.

    Reply

  7. Posted by ph.ll on October 26, 2012 at 8:55 am

    thank you thank you thank you!!!

    Reply

  8. Howdy! I could have sworn I’ve been to this blog before but after browsing through some of the articles I realized it’s new to me.

    Regardless, I’m certainly pleased I discovered it and I’ll be
    book-marking it and checking back regularly!

    Reply

  9. Hello There. I found your blog using msn. This is an extremely
    well written article. I will make sure to bookmark
    it and return to read more of your useful information.
    Thanks for the post. I will definitely comeback.

    Reply

  10. Posted by shaikh aamir on December 29, 2012 at 7:05 am

    Hello sir what a coding man fantastic one i want different kind of animations in my code like fade,blur etc pls tell me where to make changes

    Reply

  11. where v get jquery-1.3.1.min.js file ???

    Reply

  12. First of all I would like to say awesome blog!
    I had a quick question that I’d like to ask if you do not mind. I was curious to know how you center yourself and clear your thoughts before writing. I have had trouble clearing my mind in getting my thoughts out there. I do take pleasure in writing but it just seems like the first 10 to 15 minutes tend to be wasted simply just trying to figure out how to begin. Any suggestions or hints? Thanks!

    Reply

  13. Posted by Avi on February 19, 2013 at 5:10 am

    You can get jquery-1.3.1.min.js file on jquery website

    Reply

  14. I read this piece of writing fully about the resemblance
    of newest and preceding technologies, it’s remarkable article.

    Reply

  15. Hi Dear, are you really visiting this web site on a regular basis, if
    so then you will definitely take good know-how.
    online payday loan

    Reply

  16. Simply desire to say your article is as astonishing.
    The clearness in your post is simply great and i could assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.

    Reply

  17. That is a very good tip particularly to those new to the blogosphere.
    Simple but very precise information… Thanks for sharing this one.

    A must read post!

    Reply

  18. I don’t even know the way I finished up here, however I believed this submit used to be great. I do not realize who you are but definitely you’re going to a well-known blogger if you happen to aren’t already. Cheers!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: