stunicholls.com

...exploring the possibilities

jQuery image enlarger with descriptive text

15th November 2008

This script will allow you to show large images of your thumbnails such as this one - slide/pic_3h.jpg -
and also this one - slide/pic_2v.jpg - without having to do anything more than set up the class name, alt and title text.

This was more of a learning exercise to see what jQuery can do with page mainipulation.

One final imgage to enlarge - slide/pic_10v.jpg - click it to see a fullsize image.

Copyright © 2008 stu nicholls - stunicholls.com

Next Demonstration Next Demonstration

Information

As stated above, this was done to learn more about how jQuery can be used. I have tried to emulate the 'lightbox' type of application but removing the need for a link and having the information within the thumbnail image.

Clicking on any of the thumbnails above will produce a screen overlay with the fullsize image and descriptive text.

Clicking on the 'Close X' text will close the overlay.

Please note that this is an experimental demo and there is no error trapping, so the alt/image and title/text must be present and must be a valid image path and plain text. I may refine this further as I experiment with jQuery.

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

If you would like a copy of this demonstration then please email me and make a donation to support stunicholls.com, every little helps to keep this site up and running.