Click here to Skip to main content
Click here to Skip to main content
Go to top

Use JQuery and CSS Slide Show Pictures

, 9 Sep 2010
Rate this:
Please Sign up or sign in to vote.
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.

<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.

License

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

Share

About the Author

Lewis Liu L
Software Developer
Australia Australia
If you think this article is useful, please donate using paypal:
https://www.paypal.com/au/webapps/mpp/make-online-payments
 
by using my email: yyiu002@hotmail.com

Comments and Discussions

 
QuestionIs there any timer Pinmembermasdket14-Feb-14 3:21 
GeneralMy vote of 5 PinmemberEric Xue (brokensnow)8-Sep-10 23:42 
GeneralRe: My vote of 5 [modified] PinmemberLLewisLiu9-Sep-10 10:38 
GeneralRe: My vote of 5 PinmemberEric Xue (brokensnow)9-Sep-10 10:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 9 Sep 2010
Article Copyright 2010 by Lewis Liu L
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid