How to fix the width and height of jquery lightbox?

Question

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

Solution 1

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

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

Solution 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

Solution 3

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

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