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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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.
Demo: image slider
