Simple Thumbnail Solution | JavaScriptSource

Simple Thumbnail Solution

Troy Wolf Nov 19, 2008

General

Use this script to browse through a series of images. The thumbnail images are displayed, and a larger copy of the selected image is displayed to the right. The selected thumbnail is also highlighted.




Notes

  • Created by: Troy Wolf

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: simpleThumbnail.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(5 comments)

Bill,[br /][br /]The author didn't give a contact address or Web site. Due to the nature of your questions, you will need to post them over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Jan 16, 2009

Is it possible to contact the author? I didn't see a link to a web site or email address for him.[br /][br /]This is similar to things that I have been looking for but there are a couple of "glitches" and other possibilities similar to Sharon's request that might be easy to add and make this script a mind blower for people.[br /][br /]1) The thumbnails are just the full file reduced in the browser. If the files are big, you have to download the full files before the thumbnails show up.[br /][br /]2) The full image is always at the top of the web page. If it was made to float to the top of the screen, it would stay visible if there are enough thumbnails to have the window scrolled down.[br /][br /]3) Possibly add the ability to have more controls so that people can go to First, Previous, Full Sized, Next, Last items within the page.[br /][br /]4) Is it possible to have the file data (ThumbName, ThumbTitle, MediumName, Medium Title, FullName, FullTitle) listed in a text block in the page so it can be developed seperately from the HTML?

Bill Fuhrmann Dec 2, 2008

[a href="http://javascript.internet.com/image-effects/image-gallery.html"]Here is one solution.[/a] And [a href="http://javascript.internet.com/image-effects/jas-gallery.html"]here is another[/a].

Lee Dec 2, 2008

This really nice code.[br /]Simply Superb![br /][br /]Thanks and regards,[br /]Amol Bhavsar.

Amol Bhavsar Nov 25, 2008

I like this little thumbnail solution very much. What I am looking for is something exactly like this, but with the ability to put a different caption under each one of the larger photos.[br /][br /]Have you got one like that, or can someone write one? Thank you!

Sharon Jackson Nov 21, 2008