Scott Wojan

DotRant BLOG
posts - 18, comments - 63, trackbacks - 5

My Links

News

Archives

Post Categories

Image Galleries
<< Sir... We're not the taco stand... | Home | Is it cold in here? >>

JQuery LightBox Max Height and Width

I needed lightbox 2 functionality for a project I'm working on, but didn't want the overhead of having to include prototype, scriptaculous, et al that comes with it since we are already using JQuery.  I found the excellent JQuery lightbox plugin written by Leandro Vieira Pinho and works well, but I needed to be able to set the max height and width so I had to mod the code as follows:

 

settings = jQuery.extend({
    maxWidth: null,
    maxHeight: null,

...

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);  

...
Now you can specify a max width and height like:
    $('.yourClass a').lightBox({
            maxHeight: 500,
            maxWidth: 700
    });
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Print | posted on Wednesday, June 17, 2009 9:19 AM |

Feedback

Gravatar

# re: JQuery LightBox Max Height and Width

Thank you . It helped a lot :)
Tomas
7/1/2009 10:10 AM | Tomas
Gravatar

# re: JQuery LightBox Max Height and Width

Sweet, this came in handy and worked great. Thanks!
8/4/2009 2:15 AM | Dave D.
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks so much! This is exactly what I was looking for. You should consider contacting the plugin author to have this added to future releases. Thanks again.
8/11/2009 7:49 AM | Jason Daihl
Gravatar

# re: JQuery LightBox Max Height and Width

Thank you! Works very nice.
8/25/2009 4:20 AM | Mathijs
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks. Thats what I needed.
I use it with screen.height and screen.width, so the pics are always smaller than the clients screen-resolution:

$('.yourClass a').lightBox({
maxHeight: screen.height * 0.9,
maxWidth: screen.width * 0.9 });
11/18/2009 2:48 AM | Richard Martin
Gravatar

# re: JQuery LightBox Max Height and Width

Thank you. It is working perfectly.
12/11/2009 5:23 AM | Flakron Bytyqi
Gravatar

# re: JQuery LightBox Max Height and Width

You rule! Thank you so much
5/5/2010 1:57 PM | Ian
Gravatar

# re: JQuery LightBox Max Height and Width

have syntax ERROR!
5/15/2010 11:49 AM | spiriralph
Gravatar

# re: JQuery LightBox Max Height and Width

Thank You Very much.
5/29/2010 1:09 AM | Sumanta Pati
Gravatar

# re: JQuery LightBox Max Height and Width

you are star !!! Thankyou !!!
6/13/2010 6:35 AM | Isuru
Gravatar

# jQuery lightbox max width, a little help please!

I can't seem to get this to work.
I am using jquery.min v.1.4.1 - and lightbox lightbox-0.5.js.

1. I've added the maxWidth: null, maxHeight: null to "settings = jQuery.extend"=part to lightbox.js.
2. Also added the _resize_container_image_box function to lightbox.js.
3. Specified maxheight and width in my document. The lightbox is working but the maxwidth/height part isn't.

Can someone help me by telling me what i'm doing wrong?
6/13/2010 8:57 AM | ooh_zo
Gravatar

# re: JQuery LightBox Max Height and Width

Your code is very nice, but I don't think it's working quite properly.

In your code, if the image is wide, it's not resized according to the maxHeight setting. This is a issue if the maxHeight is set lower than maxWidth, since the image can then break the maxHeight-boundary.

Try setting maxHeight very low, on an image that is "wide" and your'll see the issue yourself.

I've made a very small correction to your code in order to fix what I've just mentioned:

Change:

var isWider = intImageWidth > intImageHeight;
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;

To:

var isWider = intImageWidth/intImageHeight > settings.maxWidth/settings.maxHeight;
var scale = isWider ? settings.maxWidth/intImageWidth : settings.maxHeight/intImageHeight;
intImageWidth = intImageWidth * scale;
intImageHeight = intImageHeight * scale;

With this correction, the image will be scaled according to the boundary that it breaks and not to whether it's "wide".
8/18/2010 8:43 AM | Jesper Sørensen
Gravatar

# re: JQuery LightBox Max Height and Width

Yes, this code has some problems

The first is as Jesper described above

The second is that you have to set both maxWidth and maxHeight for it to work; what if you want to set only the max for width, or just max for height?

I made the following changes:

Change:

maxWidth: null,
maxHeight: null,

...

if((settings.maxWidth != null && settings.maxHeight != null) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){

To:

maxWidth: 9999,
maxHeight: 9999,

...

if((settings.maxWidth != 9999 || settings.maxHeight != 9999) && (intImageWidth > settings.maxWidth || intImageHeight > settings.maxHeight)){
10/8/2010 4:09 AM | Joe Strong
Gravatar

# re: JQuery LightBox Max Height and Width

extra thanx ! you all helped me a lot !

To obtain current W/H, I used :
[code]
$('.yourClass a').lightBox({
maxHeight: $(window).height()* 0.9,
maxWidth: $(window).width() * 0.9
});
[/code]
10/22/2010 6:08 PM | rip_pit
Gravatar

# re: JQuery LightBox Max Height and Width

i Just tried with the solution Scott 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);
});
12/24/2010 11:47 PM | Pranav Dave
Gravatar

# re: JQuery LightBox Max Height and Width

But The solution above is not working for me could anybody help me out whats wrong I am going with?
12/24/2010 11:49 PM | Pranav Dave
Gravatar

# re: JQuery LightBox Max Height and Width

Right now I have two files in my header; jquery.js and jquery.lightbox-0.5.js

Which one to I edit and where do I add/remove what Jesper wrote?

Thanks.
1/1/2011 10:03 AM | Sean
Gravatar

# re: JQuery LightBox Max Height and Width

Sean did you open either one of those and try to find the code??
1/2/2011 4:42 PM | duh
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks a bunch mate :)
1/12/2011 8:53 AM | A
Gravatar

# re: JQuery LightBox Max Height and Width

That's correct....


<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({ maxHeight: 200,
maxWidth: 200 });
});
</script>


Thx all.
1/26/2011 9:24 PM | valentin1000
Gravatar

# re: JQuery LightBox Max Height and Width

Is anyone able to post the full edited file so it's easier to add this function?
2/15/2011 2:44 PM | Morten
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks a lot, it's save my time
I add this before calling lighbox, to be always smaller than the user resolution
it's compatible FF, IE>4 :)


var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

$(document).ready(function(){
$('a.lightbox').lightBox({
maxHeight: (myHeight - 150),
maxWidth: myWidth
});
});
3/30/2011 4:59 AM | Abdessamad
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks a lot!!!!!!!!
5/11/2011 1:40 AM | Leandro M.
Gravatar

# re: JQuery LightBox Max Height and Width

Thank a lot ...i fix the image size ...
5/27/2011 12:19 AM | Arunkumar
Gravatar

# re: JQuery LightBox Max Height and Width

I modified the jquery.lightbox-0.5.js file by Leandro Vieira Pinho. You don't have specify a width or height. What this modified javascript file does is, it will check each image and if the width or height exceeds the screen, then the image is resizes 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
6/20/2011 10:53 AM | Sunimal Kaluarachchi
Gravatar

# re: JQuery LightBox Max Height and Width

PERFECT!

thanks Sunimal Kaluarachchi
7/21/2011 12:23 PM | jose
Gravatar

# re: JQuery LightBox Max Height and Width

Thank you, Sunimal Kaluarachchi!!!!
Great job!!!
7/30/2011 11:51 AM | igor i.
Gravatar

# re: JQuery LightBox Max Height and Width

Thank you so much! You're a great help! ^_^
8/20/2011 4:17 AM | shescott
Gravatar

# re: JQuery LightBox Max Height and Width

hi - excuse the dumb question but where on earth does all this go?? ive tried it in my lightbox js file, in my header under script tags - no luck!!!

perhaps a basic one liner on just what to do / where to put it all?

Regards
9/27/2011 1:04 PM | fran
Gravatar

# re: JQuery LightBox Max Height and Width

Whoa!!
Great Job, thanks Sunimal Kaluarachchi
thanks a lot
10/24/2011 11:56 AM | David Nicolas
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks Sunimal Kaluarachchi, ur code is very helpful! Thx a lot
11/14/2011 12:33 AM | Programmer
Gravatar

# re: JQuery LightBox Max Height and Width

Great, thanks a lot!
1/8/2012 5:25 PM | mondfish
Gravatar

# re: JQuery LightBox Max Height and Width

Thank u very much...,
2/8/2012 6:54 AM | Logesh
Gravatar

# re: JQuery LightBox Max Height and Width

Thanks Sunimal.
have you contacted the original author of the script so your update is applied in the next release?
2/10/2012 10:13 AM | Slavi
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by:

Copyright © Scott Wojan