Introduction
We have seen that a lot of web sites have picture slide shows. They can be useful to show various pictures of a product.
Using the Code
With JavaScript we can achieve this, or we can use JQuery make the code more clean and neat.
When customer accesses a product' page from a web site, all pictures are downloaded to customer's PC, then we can use JavaScript to manipulate those images. We need to have a "Previous", "Next" buttons, a Preview picture box of all the images, and while user navigates through pictures, we put an extra description beside the individual image.
The HTML head section includes the JQuery file, our own JavaScript code, and adds pictures to our slider object.
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/JScript3.js"></script>
<script type="text/javascript" src="js/JScript2.js"></script>
<script type="text/javascript">
<!--
slider.AddImage("img/mini.jpg","Mini Cooper Volks Wagon");
slider.AddImage("img/nokia 3110.jpg","Latest Nokia 3110 fasdfsdfas fasfasfas");
slider.AddImage("img/nokia 6500.jpg","this asdfi afa africa");
slider.AddImage("img/printer.jpg","a cute printer asfd");
slider.AddImage("img/sony eric.jpg","coool cellphone");
slider.TitleField="#divTitle";
slider.Preview="#divPreview";
slider.Container="rImage";
</script>
Explanation of the above lines:
- JScript3.js will help us popup a new window within the current browser
- JScript2.js contains the slider object, it manipulates images
If you open up JScript2.js, you will see following lines:
slider=new Object ();
slider.Interval=2000;
In JavaScript, we can use Object Oriented programming. First, we create an Object called "slider
" with a property called "Interval
". Its value is 2000ms, which is our timer interval period.
The following lines are very important:
slider.Images=new Array();
slider.Index=0;
slider.TitleField=0;
slider.Preview=0;
slider.Container=0;
We created an image array to hold HTML's Image
objects.
Slider.Index
will hold current image array element index. Slider.TitleField
will be used to display description, we will assign a "<div>...</div>
" to it. Slider.Container
will be replaced from time to time to display our image, it is an Image
object, its src
attribute was used to load our images.
Now we define a function for our slider
object by following:
slider.ShowImage=function(){
document[this.Container].src=this.ImageLoc();
if ($(this.TitleField).exists()) {
if ($(this.Preview).exists()){
$(this.TitleField).html(this.Title());
}
else{
var count=this.Index;
count++;
$(this.TitleField).html(this.Title()+
"<br/><br/>"+count+"/"+this.Images.length);
}
}
this.ShowPreviews();
};
document[this.Container].src=this.ImageLoc();
The above line will replace our image object on screen to a new picture.
$(this.TitleField).html(this.Title()+"<br/><br/>"+count+"/"+this.Images.length);
The above line does two things: it uses JQuery to change our Description division's inner HTML to image
's description, and adds an index of total images indication.
You can download the above code, then open it will FireFox, Internet Explorer, etc.