Click here to Skip to main content
12,890,879 members (57,353 online)
Click here to Skip to main content
Add your own
alternative version


27 bookmarked
Posted 8 Sep 2010

Use JQuery and CSS Slide Show Pictures

, 9 Sep 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
How to use JQuery and CSS slide show pictures


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");
    //   -->

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 ();

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

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:

//$(this.Container).src = this.ImageLoc();
if ($(this.TitleField).exists()) {
     if ($(this.Preview).exists()){ 
         var count=this.Index;

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


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.


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


About the Author

Lewis Liu L
Software Developer
Australia Australia
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionIs there any timer Pin
masdket14-Feb-14 3:21
membermasdket14-Feb-14 3:21 
GeneralMy vote of 5 Pin
Eric Xue (brokensnow)8-Sep-10 23:42
memberEric Xue (brokensnow)8-Sep-10 23:42 
GeneralRe: My vote of 5 [modified] Pin
LLewisLiu9-Sep-10 10:38
memberLLewisLiu9-Sep-10 10:38 
GeneralRe: My vote of 5 Pin
Eric Xue (brokensnow)9-Sep-10 10:45
memberEric Xue (brokensnow)9-Sep-10 10:45 

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

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

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