I use jquery lighbox in my image gallery, but due to the large size of the images, the lightbox size is not fixed, so it opens with the original image size, which, in turn, causes biga images to exit the screen and display a horizontal scroll bar in browser
Therefore, I am looking for a way to apply the width and height fix to the lightbox so that each image should be displayed with that lightbox size.
Please, help..
Update
i Just tried Scott's solution ( http://geekswithblogs.net/wojan/archive/2009/06/17/jquerylightbox.aspx ), I did it,
function _resize_container_image_box(intImageWidth,intImageHeight) {
if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
var isWider = intImageWidth > intImageHeight;
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();
var intWidth = (intImageWidth + (settings.containerBorderSize * 2));
var intHeight = (intImageHeight + (settings.containerBorderSize * 2));
var intDiffW = intCurrentWidth - intWidth;
var intDiffH = intCurrentHeight - intHeight;
$('#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);
});
, , " ", .
,