In our previous tutorial on this series, we laid the foundation for this application. This will be an addition to what we did in the previous tutorial so if you haven't gone through it, endeavor to go through it and understand what we were trying to do before you join us on this. It's okay to go on for as long as you don't have any issues.
Source code:
<html>
<head>
<title>jquery image Slider</title>
<style>
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(images/gears.gif);
background-repeat:no-repeat;
background-position:center;
}
.shadow{
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:806px;
height:70px;
margin:5px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
</head>
<script type="text/javascript">
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").hide("slide",{direction: "left"},500);
var sc = $(".slider img").size(); //slider count
var count = 2; //next image
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(4500).hide("slide",{direction:"right"},500);
if(count == sc){
count = 1;
}else{
count +=1;
}
},5500);
}
</script>
<body onload="Slider();">
<div class="slider">
<img id="1" src="images/beach.jpg" border="0" alt="Slider 1">
<img id="2" src="images/bus.jpg" border="0" alt="Slider 2">
<img id="3" src="images/city.jpg" border="0" alt="Slider 3">
<img id="4" src="images/groupPix.jpg" border="0" alt="Slider 4">
<img id="5" src="images/pass.gif" border="0" alt="Slider 5">
</div>
<div class="shadow"></div>
</body>
</html>
This part 2 focuses on the jQuery section that will get our project up and running. I advice you download the jQuery file and jQuery UI file to your PC as loading the external files online could cause a little problem if you have a slow connection.
In my case, I downloaded them to my PC. Both files reside in the same directory with my imageSlider_1.html file. There is no change to the CSS section. In the HTML section, the image src now holds the path to an existing image that can be loaded within the slider div. In addition to that, Javascript onload function is added in the HTML body tag. Permit me to run through the jQuery section.
<script type="text/javascript">
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").hide("slide",{direction: "left"},500);
var sc = $(".slider img").size(); //slider count
var count = 2; //next image
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(4500).hide("slide",{direction:"right"},500);
if(count == sc){
count = 1; //go back and start from the beginning.
}else{
count +=1; //load next image
}
},5500);
}
</script>
We defined a function called Slider that is called in the HTML body tag when the page is loaded using the onload Javascript event handler. This function is defined to run through the entire page and pick on HTML element with a class name
slider and within that element, it has an id of 1. Period (.) denote class whereas (#) denote id. jQuery show function is used to load the image with a fade animation that stays for 500 milliseconds. Afterwards, that same image is permitted to slide left and be hidden for 500 milliseconds.
In order to get the total number of all the images within the slider DIV, we used jQuery size function to loop through the img elements and keep to record the sum in sc variable.
Since the first image was loaded, the next image should be loaded to avoid repetition. Count variable has been initialized with the value 2 pointing to the next image in the loop.
What we have done so far is to load the first image, hide it, get the sum of all the images in the slider class and initialize count. We need to do more than that. We have a total of five(5) images. We need to loop through them and display one at a time.
That's what the next line does. We call the setInterval function. It's an in-built function. This function takes two parameters. The first argument is an anonymous function. We then load the second image and display it within slider DIV using show function.This is done using slide animation loading from the right hand side with a delay of 500 milliseconds.
The image is then hidden from the eyes for 500 milliseconds. This process will go on and on. When the last image is loaded, we need to go back and load the first image to start from the beginning. That is achieved using the if-conditional statement. The last parameter for setInterval function the delay in milliseconds. Within the setInterval function, we have a total of 5500 milliseconds
delay. This is arrived at by adding 500 + 500 + 4500.
So far, when you hover over the image; probably you expect it to pause for a while. We'll look into that in the next tutorial.
0 comments:
Post a Comment