How to fix the width and height of jquery lightbox?

问题

I have aplied jquery lighbox on my image gallery, but due to the variable size of images, the lightbox size is not fixed hence opens up with image's original size, this in turn causes the biga images to go out of screen and display horizontal scroll bar in browser.

Hence I am looking for the way to apply the fix width and height to lightbox so that every image must be displayed with this size in lightbox.

Please help..

Update

i Just tried with the solution Scott (http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx) has given to me, I did this,

function _resize_container_image_box(intImageWidth,intImageHeight) {
// Get current width and height
//rescale if necessary
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}

$('#lightbox-image').height(intImageHeight); 
$('#lightbox-image').width(intImageWidth); 
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();
// Get the width and height of the selected image plus the padding
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image´s width and the left and right padding value
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image´s height and the left and right padding value
// Diferences
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
// Perfomance the effect
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
if ( $.browser.msie ) {
___pause(250);
} else {
___pause(100);  
}
} 
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
};

AND

$('#gallery a').lightBox( maxHeight: null,
maxWidth: null);
});

But whenever I do this and click on the image just gets open in browsers annother tab, all the lightbox functinalty fails

Please help me to correct it

Thanks

回答1:

You need to specify the maxHeight and maxWidth against all calls of the lightbox(). Example:

$('#gallery a').lightBox({
  maxHeight: 700, 
  maxWidth: 700
});

回答2:

I modified the jquery.lightbox-0.5.js file by Leandro Vieira Pinho. What this modified javascript file does is, it will check each image and if the width or height exceeds the screen (viewport area), then the image is resized while preserving the aspect ratio.

To use this file, you just have to copy and paste entire contents of this javascript file in your already existing jquery.lightbox-0.5.js file or you just have to replace the old file with this.

I have given 2 links: First one will let you down load the entire javascript file and the second will display the source code which you can copy and paste into your existing jquery.lightbox-0.5.js.

Download javascript file: http://turboupload.com/081zwttawcb6

Source code : http://www.sourcepod.com/twhbtf88-5047

回答3:

You lightbox call is missing a {. Change your lightbox call to as follows:

$('#gallery a').lightBox( {maxHeight: null,
maxWidth: null
});

回答4:

Sunimal Kaluarachchi's code works well but doesn't handle a landscape aspect ratio properly.

To work properly you need to change

 if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
 to    
 if ( newImageWidth > newViewPortWidth  ) //

in his function ___calculateImageDimension function

here is the complete function

function ___calculateImageDimension(viewPortWidth, viewPortHeight, imageWidth, imageHeight)
    {
        // obtain 82% of ViewPort Height
        var viewPortHeightPercent = viewPortHeight * (82/100);

        var newImageHeight = imageHeight;
        var newImageWidth = imageWidth;
        var newViewPortWidth = viewPortWidth;
        var scaleHeight =0;
        var scaleWidth = 0;

       // if ( newViewPortWidth > viewPortHeight ) // if viewport width > viewport height
        if ( newImageWidth > newViewPortWidth  ) // if viewport width > viewport height
        {
            // Get 80% of current viewport width so the image width will be displayed within this 80% of viewport width size
            newViewPortWidth = viewPortWidth * (80/100);
        }

        // image width check
        if ( newImageWidth > newViewPortWidth )
        {
            newImageWidth = newViewPortWidth;
            scaleWidth = imageHeight/imageWidth;
            newImageHeight = scaleWidth * newImageWidth;
        }
        // image height check
        if ( newImageHeight > viewPortHeightPercent )
        {
            newImageHeight = viewPortHeightPercent;
            //calculate scale to set width
            scaleHeight = imageWidth/imageHeight;
            newImageWidth = scaleHeight * newImageHeight;
        }
        arrayNewImageSize = new Array(newImageWidth,newImageHeight);
        return arrayNewImageSize;
    }

回答5:

Your function should replace the one in the jquery.lightbox.js plugin file (look for the function that starts with function _resize_container_image_box somewhere around line 196).

What you need to do next is call lightBox()in your external JS file or inside html like #cocacola09 and #Chandu suggested:

   $('#gallery a').lightBox( {maxHeight: null,
    maxWidth: null
    });

What i did in addition is to get the width and height of a window dynamically, so it fits the current window size:

$(function() {
    //get height and width of window
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    //windowsize - 50px
    var windowHeightFixed = windowHeight - 50;
    var windowWidthFixed = windowWidth - 50;    

    $('a.lightbox').lightBox({          
        maxHeight: windowHeightFixed,
        maxWidth: windowWidthFixed
    });
});

But this method gives some buggy results. The problem occurs when you reload the page in a different window size. Some images preserve the width/height of previous window size, but some don't. Tested in Firefox 18, Chrome 24.

来源：https://stackoverflow.com/questions/4529460/how-to-fix-the-width-and-height-of-jquery-lightbox

标签

javascript

jquery

css

lightbox