Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS

Use JQuery and CSS Slide Show Pictures

4.50/5 (7 votes)
9 Sep 2010CPOL2 min read 45K   2.6K  
How to use JQuery and CSS slide show pictures

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.

HTML
<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:

JavaScript
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:

JavaScript
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:

JavaScript
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();
};
JavaScript
document[this.Container].src=this.ImageLoc(); 

The above line will replace our image object on screen to a new picture.

JavaScript
$(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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)