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.
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.
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="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
This page was last modified on August 27, 2020
