Geeks With Blogs
Scott Wojan DotRant BLOG

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
    });
Posted on Wednesday, June 17, 2009 9:19 AM | Back to top


Comments on this post: JQuery LightBox Max Height and Width

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you . It helped a lot :)
Tomas
Left by Tomas on Jul 01, 2009 10:10 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Sweet, this came in handy and worked great. Thanks!
Left by Dave D. on Aug 04, 2009 2:15 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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.
Left by Jason Daihl on Aug 11, 2009 7:49 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you! Works very nice.
Left by Mathijs on Aug 25, 2009 4:20 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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 });
Left by Richard Martin on Nov 18, 2009 2:48 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you. It is working perfectly.
Left by Flakron Bytyqi on Dec 11, 2009 5:23 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
You rule! Thank you so much
Left by Ian on May 05, 2010 1:57 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
have syntax ERROR!
Left by spiriralph on May 15, 2010 11:49 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank You Very much.
Left by Sumanta Pati on May 29, 2010 1:09 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
you are star !!! Thankyou !!!
Left by Isuru on Jun 13, 2010 6:35 AM

# jQuery lightbox max width, a little help please!
Requesting Gravatar...
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?
Left by ooh_zo on Jun 13, 2010 8:57 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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".
Left by Jesper Sørensen on Aug 18, 2010 8:43 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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)){
Left by Joe Strong on Oct 08, 2010 4:09 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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]
Left by rip_pit on Oct 22, 2010 6:08 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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);
});
Left by Pranav Dave on Dec 24, 2010 11:47 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
But The solution above is not working for me could anybody help me out whats wrong I am going with?
Left by Pranav Dave on Dec 24, 2010 11:49 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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.
Left by Sean on Jan 01, 2011 10:03 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Sean did you open either one of those and try to find the code??
Left by duh on Jan 02, 2011 4:42 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thanks a bunch mate :)
Left by A on Jan 12, 2011 8:53 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
That's correct....


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


Thx all.
Left by valentin1000 on Jan 26, 2011 9:24 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Is anyone able to post the full edited file so it's easier to add this function?
Left by Morten on Feb 15, 2011 2:44 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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
});
});
Left by Abdessamad on Mar 30, 2011 4:59 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thanks a lot!!!!!!!!
Left by Leandro M. on May 11, 2011 1:40 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank a lot ...i fix the image size ...
Left by Arunkumar on May 27, 2011 12:19 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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
Left by Sunimal Kaluarachchi on Jun 20, 2011 10:53 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
PERFECT!

thanks Sunimal Kaluarachchi
Left by jose on Jul 21, 2011 12:23 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you, Sunimal Kaluarachchi!!!!
Great job!!!
Left by igor i. on Jul 30, 2011 11:51 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you so much! You're a great help! ^_^
Left by shescott on Aug 20, 2011 4:17 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
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
Left by fran on Sep 27, 2011 1:04 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Whoa!!
Great Job, thanks Sunimal Kaluarachchi
thanks a lot
Left by David Nicolas on Oct 24, 2011 11:56 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thanks Sunimal Kaluarachchi, ur code is very helpful! Thx a lot
Left by Programmer on Nov 14, 2011 12:33 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Great, thanks a lot!
Left by mondfish on Jan 08, 2012 5:25 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank u very much...,
Left by Logesh on Feb 08, 2012 6:54 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thanks Sunimal.
have you contacted the original author of the script so your update is applied in the next release?
Left by Slavi on Feb 10, 2012 10:13 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Sunimal Kaluarachchi! you are a legend! thanks :) just what i was looking for!
Left by David Boston on Mar 12, 2012 4:05 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you very much guys for the nice comments. I'm really glad that the modified code helped you solve the problems in displaying your images properly.

@Slavi, I will contact the original author and will let him know of the update so that he could include it in the next release. Thanks for the reminder.

@fran, if you are still looking for the places to include these files, please email me at ksunimal@aol.com and I will help you out, my friend.

Thanks again guys...

Sunimal
Left by Sunimal Kaluarachchi on Mar 19, 2012 12:40 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thank you for this solution it is exactly what I was looking for and there is no errors it works like charm
Thank you again
Left by Khaled on Nov 26, 2012 12:51 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Thanks for the code It worked great.
Left by Chand Prakash on Dec 07, 2012 8:51 AM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
Hi, nice example.

It`s just I need!

Thks all.
Left by TLima on May 29, 2013 3:01 PM

# re: JQuery LightBox Max Height and Width
Requesting Gravatar...
thank you...for the help,
Nice tutorial..:) :)
Left by Neetu on Aug 28, 2013 2:51 PM

Comments have been closed on this topic.
Copyright © Scott Wojan | Powered by: GeeksWithBlogs.net