Lightbox JS - Free Thumbnail Viewing Software Review

Do you want to click on a thumbnail image and have a larger image pop up on the same page? Lightbox JS code can be downloaded free from various websites, including DynamicDrive.com. Here is our review.

There are two versions of Lightbox: the original Lightbox Image Viewer, and the fancier Lightbox Image Viewer 2.03a. Lightbox uses the JavaScript onclick method. The user clicks the thumbnail and the large image displays in the same window. I tested Lightbox successfully and got the HTML below to validate strict XHTML:


<a href="image/pic1-large.jpg" rel="lightbox" class="thumb" title="Caption text underneath image"><img src="image/pic1-thumb.jpg" width="60" height="65" alt="alt text here" /></a>


In the HEAD section of your document, include these statements. Of course, if you incorporate the CSS provided into your own stylesheet, you don’t need the first line below:


<link rel="stylesheet" href="inc/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="inc/lightbox.js"></script>


I could not get the image to open in the same window - it kept opening in a new browser window. Finally, in the wee hours of the morning, I tried the following code and it worked! If you have that problem, put the following code in the HEAD section of your document after the HTML above:


<!--force image to open in same window-->
<script type="text/javascript">
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", initLightbox, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", initLightbox );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
initLightbox();
};
}
else
window.onload = initLightbox;
}
</script>
<!--end of force image to open in same window-->


I only tested the basic version. The only thing I didn’t like was if the image height was greater than the browser window, the lower part of the image was hidden. This was not the case with PopBox!, a similar solution discussed in our blog PopBox! - Image Thumbnail Viewing Software. The demos of the enhanced Lightbox are interesting if you want the large image to display with some bells and whistles. However, V.2 may be more complicated to implement for the newbie. I cannot answer implementation questions. However, there is a forum available for help on the author’s website.