Update 2011: For those people who had problems with the below instructions.. please find in on my website here. And when you’re there take a look at my site and see what you think about it 🙂
Lightbox 2 has the functionality to set maximum width and height. But what about previous versions? To set the maximum image width and height for lightbox (version 0.5) you need to do some extra coding yourself. Open the jquery.lightbox-0.5.js file and search for the next pieces of code (in bold below):
settings = jQuery.extend({
maxWidth: null,
maxHeight: null,
...
Then search for the next function (in bold) and write copy and paste the code underneath it:
function _resize_container_image_box(intImageWidth,intImageHeight) {
//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);
...
With the above code added, now you can specify the maximum image size when calling a new lightbox instance with the next code:
$('.yourClass a').lightBox({
maxHeight: 500,
maxWidth: 700
});
You can also set the maximum width and height according to the user’s screen width and height by using the following code:
$('.yourClass a').lightBox({
maxHeight: screen.height * 0.9,
maxWidth: screen.width * 0.9
});
Resources: here
14 Responses
It doesn’t work…
Hmm.. it should work. I tested it myself and worked fine for me. What Lightbox version are you using? This only works on Lightbox version 0.5.
I tried it as well (with jQuery Lightbox 0.5) and the lightbox stopped working.
If you’re still having this problem.. Try the code as I did it from the link above and see if it works for you.
Because I just give the code:
if(intImageHeight > screen.height)
{
WysDzielnik = screen.height/intImageHeight;
intImageHeight = screen.height;
intImageWidth = intImageWidth * WysDzielnik;
}
if(intImageWidth > screen.width)
{
SzerDzielnik = screen.width/intImageWidth;
intImageWidth = screen.width;
intImageHeight = intImageHeight * SzerDzielnik * 0,8;
}
Sorry, no last entry:
if (intImageHeight> screen.height)
{
WysDzielnik = screen.height / intImageHeight;
intImageHeight = screen.height;
intImageWidth = intImageWidth * WysDzielnik;
}
if (intImageWidth> screen.width)
{
SzerDzielnik = screen.width / intImageWidth;
intImageWidth = screen.width;
intImageHeight = intImageHeight * SzerDzielnik;
}
Try the code as I did it from the link above and see if it works for you.
Great fix!
Works perfectly. Thanks a lot.
I set $(‘.gallery a’).lightBox({ maxHeight: 20, maxWidth: 20});
but its not working its still showing the original size
please help me
Hi,
I tried youur solution but it doesn’t work for me.
i did it but i use practicaly the css:
in the function ‘_resize_container_image_box’ i add the code you gave to us:
“page_width=window.innerWidth;
page_height=window.innerHeight;
if((page_width != null && page_height != null) && (intImageWidth > page_width || intImageHeight > page_height)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? page_width/intImageWidth : page_height/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}
”
and at the end of the function i add other thing:
”
$(‘#lightbox-container-image-box’).css({ ‘max-width’: intWidth, ‘max-height’:intHeight });
$(‘#lightbox-container-image-box img’).css({ ‘max-width’: intImageWidth, ‘max-height’:intImageHeight });
“
hi,
for me i tried this solution but it doesn’t work correctly.
so i did it other way:
in the function “_resize_container_image_box” i add practically the same code :
” //rescale if necessary
page_width=window.innerWidth;
page_height=window.innerHeight;
if((page_width != null && page_height != null) && (intImageWidth > page_width || intImageHeight > page_height)){
var isWider = intImageWidth > intImageHeight;//is the image wide or tall?
var scale = isWider ? page_width/intImageWidth : page_height/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;
}”
and at the end of this function i add also:
”
$(‘#lightbox-container-image-box’).css({ ‘max-width’: intWidth, ‘max-height’:intHeight });
$(‘#lightbox-container-image-box img’).css({ ‘max-width’: intImageWidth, ‘max-height’:intImageHeight });”
I tryed it and it works , thanks a lot.
Thank you friend, it really helped me a lot.
I know this is an old tread, hope its still being watched.
Thanks I tried it and it worked, but just one issue.
The image is now resized perfectly, but the description block remains at the original image’s position.
any idea how to fix that?