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 info
To 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 modified code here – jQuery lightBox 0.5 AlferSoft Mod