stunicholls.com

...exploring the possibilities

jQuery Photo-Slide

4th March 2009

1
2
3
4
5
6
7
8
9
10

Copyright ©2009 stu nicholls - stunicholls.com

Now with an additional Info-Slide.

Next Demonstration Next Demonstration

Information

I have seen many slide galleries similar to this but none with the feature of this one.

To get from one image to another you only get one image movement. In other words if you move from image 1 to image 3 you do not have to move through image 2, and similarly if you move from image 10 to image 1 using the left/right buttons you do not fly back to image 1. This way there is no flying backwards and forwards to see your images just a single move left or right.

You are also not limited to using exactly 10 images, it is just a case of setting the jQuery variable for the number of images and then adding or removing images and corresponding number buttons.

Similarly with the image width. This is set up in the jQuery as a variable and you will also need to set the #slide width in the stylesheet.

The picture frame is just a styled div so this can be made any size you like to fit any photo height.

I have added numbers to each photograph so that you can see that this does change from one photo to another in the chosen sequence.

Finally, the images are all links so you can use these to reference other areas of you website or to external web pages.

You will need a copy of jQuery to be able to use this slideshow.

If you would like a copy of this demonstration then please email me and make a donation to support stunicholls.com. A donation is required for the use of this demo and every little helps to keep this site up and running.