16th November 2008
This script will allow you to show a 'lightbox' panel containing more information by clicking a piece of inline text such as this one - John Constable.
The information can be anything you like, from plain text to images and even links to other pages.
Further examples of 'more' information can be see by clicking this text - Claude Monet, and also this text - Vincent Van Gogh.
After producing the demo to show larger images with descriptions in the form of a lightbox, I thought it might be useful to have the 'lightbox' show any information we wanted without being limited to an image with descriptions.
So this one uses a piece of text to link to a div containing the information we want to display in the lightbox. Because we are using divs to hold the further information we can place anything we like in the box, text, images, tables, and even further links.
There is a simple error trap that will check that the further information div exists before call in the routine.
All it takes is a span holding the link text which has the class name "more" and a unique title. This title is then used to locate a div with the same class name and the jQuery routine displays this div information in a 'lightbox'.
In all browsers except IE the 'lightbox' will stay fixed in position as the page scrolls underneath.
Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.
You will need a copy of jQuery to be able to use this demonstration.
If you would like a copy of this demo then please email me and make a donation to support stunicholls.com, every little helps to keep this site up and running.