Scale Image – Lightbox – Another Javascript Hack

Okay, so I’ve hack the source again. This time, I need to dynamically resize / scale the image shown by lightbox to a certain width and for a maximum compatibility, I modified the source to show a scaled image when lightbox shows it up.

I have tried a CSS based approach (min-width) but it only works on modern browsers and their(client) beloved Internet Explorer does not support it. So I have to go for a Javascript approach since this is lightbox anyway. The trick was simple: modify lightbox source code to scale image to a certain width when the original image width is less than the specified minimum width.

Lightbox javascript file contains the following major functions:

• showLightbox()
• hideLightbox()

which I need to modify. The rest will stay as is. The trick works the same as the gallerific hack I did before but this time, in a non-OOP manner. We can summarize the process this way:

• showLightbox() – resize the lightbox image when it is less than the minimum width
• hideLightbox() – remove the dimensions set by the showLightbox() function

So here are the modifications. First, we need to declare some variable at the top about our minimum width requirement. I name it scaleWidth.

//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = './image/menu/loading.gif';		
var closeButton = './image/menu/close.gif';		

// This is our modification ******
// scales the width when the original is less than this scaleWidth
var scaleWidth = 500;

// the rest of the code ******

Then add some codes on showLightbox() function to scale the image to a predefined minimum width:

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
objImage.src = objLink.href;

// modifications starts here ******
var srcImage = new Image();
srcImage.src = objLink.href;

// resize if needed
if (srcImage.width < scaleWidth) { var origWidth = srcImage.width; var origHeight = srcImage.height; var newWidth = scaleWidth; var newHeight = parseInt((parseInt(origHeight) * parseInt(newWidth) / parseInt(origWidth))); objImage.height = newHeight; objImage.width = newWidth; imgPreload.height = newHeight; imgPreload.width = newWidth; } // modifications end here [/sourcecode] And lastly, we need to restore the original image dimension so that it will allow other images with different dimension to scale as well. [sourcecode language='js'] // // hideLightbox() // function hideLightbox() { // get objects objOverlay = document.getElementById('overlay'); objLightbox = document.getElementById('lightbox'); // modifications start here ****** // restore original dimension var objImage = document.getElementById('lightboxImage'); objImage.removeAttribute('width'); objImage.removeAttribute('height'); // modifications end here ****** // hide lightbox and overlay objOverlay.style.display = 'none'; objLightbox.style.display = 'none'; // disable keypress listener document.onkeypress = ''; } [/sourcecode] It can be made flexible but since we have no other module using it, I'd rather make it quick.