In these first examples, the Lighbox link you click on is the text, not the image.

Example 1: Single Image Link

Single Link

Example 2: Grouped Images with the Group Hidden
(using display:hidden just to show how/where to apply that IF ever needed, which typically it is not)

Group of Linked Images

1. In the above example, Note the use of a second div utilizing display:hidden for hiding the associated group of images. This is not typically necessary, but in some cases you may need to do it this way.

2. In both examples, see how the Title attribute is providing a unique pop-up tip on the page, but does not interfere with the titles for the images in the lighbox display.

3. In the Grouped Images Example, did you notice that when the window is made smaller you automatically get a "link" for "Viewing the Full-Sized Image? This is one of the features you will find added to the lighbox.js file.

4. The "popup function" for the link relies on a simple javascript you will find in the Head section of this file, since I did not want to presume to add it to the lightbox.js file (its not an implicit part of lightbox...). If you use that script, it would be best to place it into your own javascripts file you use for your website. Of course, the idea is to demonstrate how you can create and use any sort of script you wish.

Example 3: Single Image Links (using linked image, instead of text as in sample1)

Example 4: Grouped Images with the Group Displayed as Thumbs

Just adding some spacing at the bottom of the page here - play with this during testing (set different heights for this div)