jQuery lightBox is a great plugin inspired in the well-known Lightbox JS by Lokesh Dhakar.
After starting using it I realized that things became messy with big images, so I made a small modification to limit the image size to the current browser window size.
Also I added an option to hide the image information. The images used to navigate between images and close the preview are in English, so I modified the images to be more neutral (just icons)
Code
Two new options were added:
fitToWindow: true, // option to fit preview to window size if the
// image is too big
showInfo: true // option to show or hide image infoTo fit the preview to the window size, I’ve replaced the call to _resize_container_image_box() with _adjust_image_size().
Here is the definition of the new function:
function _adjust_image_size(objImagePreloader) {
// get image size
var imgWidth = objImagePreloader.width;
var imgHeight = objImagePreloader.height;
var arrayPageSize = ___getPageSize();
// calculate proportions
var imageProportion = imgWidth / imgHeight;
var winProportion = arrayPageSize[2] / arrayPageSize[3];
if (imageProportion > winProportion) {
// calculate max width base on page width
var maxWidth = arrayPageSize[2] - (settings.containerBorderSize * 2) - (arrayPageSize[2] / 10);
var maxHeight = Math.round(maxWidth / imageProportion);
} else {
// calculate max height base on page height
var maxHeight = arrayPageSize[3] - (settings.containerBorderSize * 2) - (arrayPageSize[3] / 10) - 40;
var maxWidth = Math.round(maxHeight * imageProportion);
}
if (imgWidth > maxWidth || imgHeight > maxHeight) {
imgWidth = maxWidth;
imgHeight = maxHeight;
}
$('#lightbox-image').attr('width', imgWidth);
$('#lightbox-image').attr('height', imgHeight);
_resize_container_image_box(imgWidth, imgHeight);
};Finally, to optionally hide or show the image info, just canged the following line:
if ( settings.imageArray.length > 1 ) {to:
if ( settings.showInfo && (settings.imageArray.length > 1) ) {Download jQuery lightBox 0.5 AlferSoft Mod