Use JQuery and CSS Slide Show Pictures

• Download sample - 92.72 KB

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;//2000ms

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; //image index
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();
//$(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.