Quantcast
Channel: AlferSoft Blog » Software Development
Viewing all articles
Browse latest Browse all 13

jQuery Lightbox: Adjust big images to the window size

$
0
0

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


Viewing all articles
Browse latest Browse all 13

Trending Articles