Lightbox Image Zoom With Caption

The JavaScript on this page will display the zoom/large image of a thumbnail when the user clicks on a thumbnail image. You can find hundreds of similar lightbox scripts online, but I've kept the HTML mark-up required simple so that it's easy to add this effect to your webpages. It's cross-browser compatible to at least IE8, and it degrades gracefully on older browsers and those with JavaScript disabled. As a bonus, the search engines will accept this method for finding your images, too.

To implement this feature, add the script tag to the head section of your document that calls "rdLightbox.js", and add the class="rdLightboxLink" attribute to the img tag for your thumbnail image:

a href="path/to/your/large-image.jpg" class="rdLightboxLink" title="Click to see large image"
img src="path/to/your/thumbnail-image.jpg" width="xx" height="xx" border="0" alt="Your Caption Text"/a

Just fill in the appropriate information for the path to the large image, the title/caption to be displayed in the lightbox, and the path to your thumbnail image, with the width and height. No other modifications to your pages are required. It's ordinary, readable HTML just as you would find on a typical webpage. The only thing you have to do is add the class name 'rdLightboxLink' to the a tag. And it still works even if you need to use more than one class name for the tag, so it doesn't interfere with your other CSS style settings.

Try it! Just click on the image of Mickey.
Note that script sets the positioning of the lightbox image takes account
of the browser window scrollbar, so it's always visible for the user.

Your Caption Text

Here's another thumbnail image using something that makes using the lightbox even easier.
This thumbnail is created with my Automatic Thumbnail Script,
so I didn't have to create it ahead of time to achieve this effect. Just click on the image.

Disneyland Jungle Cruise

Return to main PopZoom page where you can download this software with my complete PopZoom© package.

This software provided free of charge. If you use and enjoy this software, please place the following link in an appropriate location on your site:

a href="" Rainbo Design Tools & Scripts/a

This page was last modified on December 09, 2015

Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!