Left right click gallery

2nd November 2007

Next Demonstration

Previous Demonstration


Another simple demonstration of a left/right scrolling thumbnail selector using just a simple javascript routine to manipulate the styling. It must be simple as it has only taken a day to produce :)

I have only been studying javascript for a couple of weeks now so don't be too critical of my code. I am sure that this could be done in a simpler way.

You can click on the left and right arrows to move the selector in your chosen direction. When the selector gets to the last thumbnail in the row then the thumbnails will scroll and the selector will remain where it is until the last, or first, image is chosen.

As with the previous demonstration this has the following features.

  1. Has a default image.
  2. Can have descriptive text.
  3. Can be expanded to have as many images as you like.
  4. Images can be any size.
  5. The full size images will be centered horizontally and vertically without specifying the image size.
  6. The left/right arrows can be clicked to move the selector to the next full size image.
  7. The thumbnails can also be clicked to see their full size image.
  8. The full size image will stay visible until another image is selected.

All this is achieved with just an unordered list and uses no links.

Tested IE6, IE7, Firefox, Netscape, Mozilla,Safari (PC), Opera and also in Safari for iPod Touch. The javascript is very quick in Firefox, Safari etc. but quite slow in IE.


All the files, except the photographs which are copyright their various photographers, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.

Download left_right_click.zip