Lightbox v2.0: Resize images so that they are not bigger then the current window

Bottom of Page

1 to 32 of 32

- CommentAuthormartin.s
- CommentTimeAug 11th 2006
Hello!

Lightbox is really a great thing to use but there is one thing I would like to change:

Is there a possibility that every picture which is bigger then the open window is rezized so that it is totally shown in the current window and I don't need to use the scrollbar?
I know that there is a hack for version 1 calles lightbox plus but I really would enjoy to have that resize feature in the version 2.

Thanx + greets!

martin
- CommentAuthorahavriluk
- CommentTimeAug 11th 2006
There is a modified version of the script which does that
you can get it here: http://ahavriluk.home.comcast.net/slideshow.zip

I am also preparing the more improved version so, if you are interested, stay tuned.
- CommentAuthorKreuger
- CommentTimeAug 2nd 2007
I too would like to see this as my pictures are over 2000x1000 pixels without the slideshow one.
- CommentAuthorsmallkefto
- CommentTimeAug 3rd 2007
try www.lightboxgallery.snier.com
- CommentAuthorstormy
- CommentTimeAug 4th 2007
The Lightbox code fails to set a width and height on the "img" tag it creates, so to control that, you need a custom script that adds that back in. Remember, you can put any width and height you want on an image element no matter what its real size....the browser will scale it down or up to fit. So, a better solution to the above is to just add the following inside the lightbox.js file, and "changeImage" function:

After this line "Element.setSrc('lightboxImage', imageArray[activeImage][0]);" add the following:

--------------------------------------------------------------------
if (imgPreloader.height > 480)
{
imgPreloader.width = parseInt((480/imgPreloader.height) * imgPreloader.width)
imgPreloader.height = 480
}
else if ( imgPreloader.width > 480)
{
imgPreloader.width = 480
imgPreloader.height = parseInt((480/imgPreloader.width) * imgPreloader.height)
}

Element.setWidth( 'lightboxImage', imgPreloader.width - (borderSize * 2));
Element.setHeight( 'lightboxImage', imgPreloader.height - (borderSize * 2));
------------------------------------------------------------------------

Substitute "480" with the maximum allows width or height you need in your display. This way, no matter what images are uploaded, they will always fit into the display page. I like 480 pixels as it works on all desktop monitors.

Love the Lightbox! Keep up the good work, Lokesh!

Mitchell, www.whitepacificsoftware.com
- CommentAuthorKreuger
- CommentTimeAug 5th 2007 edited
Thanks!
- CommentAuthorArmandoO
- CommentTimeAug 23rd 2007
This method actually works.

Lokesh: is there any way you can incorporate this into your existing codebase so the next version is easy to work with for resizing? It would be an awesome feature, as well as a very desired one so nobody has to modify the codebase. The method stated here is probably the best one I've seen yet to implement it.
- CommentAuthorVinDSL
- CommentTimeSep 4th 2007 edited
@ stormy

Great idea! However, I think this works better... :)

---------------------------------------------------------------------

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {

activeImage = imageNum; // update global var

// hide elements during transition
if(animate){ Element.show('loading');}
Element.hide('lightboxImage');
Element.hide('hoverNav');
Element.hide('prevLink');
Element.hide('nextLink');
Element.hide('imageDataContainer');
Element.hide('numberDisplay');

imgPreloader = new Image();

// once image is preloaded, resize image container and
// the image so it's no bigger than the current window
imgPreloader.onload=function(){
Element.setSrc('lightboxImage', imageArray[activeImage][0]);
// start hack
if (imgPreloader.height > 600){
imgPreloader.width = parseInt((600/imgPreloader.height) * imgPreloader.width)
imgPreloader.height = 600
}else if(
imgPreloader.width > 800){
imgPreloader.height = parseInt((800/imgPreloader.width) * imgPreloader.height)
imgPreloader.width = 800}
// end hack
Element.setWidth( 'lightboxImage', imgPreloader.width - (borderSize * 2));
Element.setHeight( 'lightboxImage', imgPreloader.height - (borderSize * 2));
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
}
imgPreloader.src = imageArray[activeImage][0];
},

---------------------------------------------------------------------

Regards,
VinDSL, Lenon.com
- CommentAuthorThe Merg
- CommentTimeSep 10th 2007
VinDSL:

Where is your code added into the lightbox.js script? Is it the same place as stormy's?

Thanks,
Merg
- CommentAuthorVinDSL
- CommentTimeSep 14th 2007 edited
@ The Merg

Yes, it is in the same place as stormy's, however, I provided the code for the entire function to make it easier.

In other words, simply replace the entire 'changeImage() function' with the code listed above... instead of replacing this n' that.

BTW, it's still working great! I've been getting a lot of compliments! :)

Example: http://tinyurl.com/3ybnuq

Regards,
VinDSL, Lenon.com
- CommentAuthorSoleAngelus
- CommentTimeSep 18th 2007
Is there anyway of intergrating this so that it automaticly resizes the image to fit the browser window? (rather that setting a max height?)
i know this has been done in lightbox_plus (http://serennz.sakura.ne.jp/toybox/lightbox/) but the gui seems a bit clumsy..

Anyone got a fix?

regards,

SoleAngelus
- CommentAuthorsmallkefto
- CommentTimeSep 18th 2007
lightboxgallery.snier.com
- CommentAuthorVinDSL
- CommentTimeSep 19th 2007
@ SoleAngelus

Good idea, bro! However, since I just spent 4 hours testing this hack, I'm claiming it as my own... :)

---------------------------------------------------------------------

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {

activeImage = imageNum; // update global var

// hide elements during transition
if(animate){ Element.show('loading');}
Element.hide('lightboxImage');
Element.hide('hoverNav');
Element.hide('prevLink');
Element.hide('nextLink');
Element.hide('imageDataContainer');
Element.hide('numberDisplay');

imgPreloader = new Image();

// once image is preloaded, resize image container and
// the image so it's no bigger than the current window
imgPreloader.onload=function(){
Element.setSrc('lightboxImage', imageArray[activeImage][0]);
// start hack - VinDSL (Lenon.com)
var arrayPageSize = getPageSize();
initialPageWidth = arrayPageSize[2];
initialPageHeight = arrayPageSize[3] - 200;
if (imgPreloader.height > initialPageHeight){
imgPreloader.width = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width)
imgPreloader.height = initialPageHeight
}else if(
imgPreloader.width > initialPageWidth){
imgPreloader.height = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height)
imgPreloader.width = initialPageWidth}
// end hack - VinDSL (Lenon.com)
Element.setWidth( 'lightboxImage', imgPreloader.width - (borderSize * 2));
Element.setHeight( 'lightboxImage', imgPreloader.height - (borderSize * 2));
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
}
imgPreloader.src = imageArray[activeImage][0];
},

---------------------------------------------------------------------

Regards,
VinDSL, Lenon.com
- CommentAuthorSoleAngelus
- CommentTimeSep 20th 2007
Nice one VinDSL, apreciate the work
- CommentAuthortoots
- CommentTimeNov 5th 2007 edited
Hey guys, this works great in Firefox and IE but doesn't work in Safari!

The problem in Safari is that you cannot set the image's width and height to anything other than its actual dimensions. So doing this:

----------------------------------------------------------
imgPreloader.width = newWidth;
imgPreloader.width = newHeight;
----------------------------------------------------------

will not work! You need to create a new variable to hold the newWidth and newHeight:

----------------------------------------------------------
var newWidth = parseInt((maxHeight/imgPreloader.height) * imgPreloader.width);
var newHeight = parseInt((maxWidth/imgPreloader.width) * imgPreloader.height);
----------------------------------------------------------

Then pass those values to the image element (uses element.style.width to set dimensions):

----------------------------------------------------------
Element.setWidth( 'lightboxImage', newWidth);
Element.setHeight( 'lightboxImage', newHeight);
----------------------------------------------------------

And don't forget to resize the lightbox container too, otherwise it will be out of whack:

----------------------------------------------------------
myLightbox.resizeImageContainer(newWidth, newHeight);
----------------------------------------------------------

Here's the entire code (Stormy's code) with the Safari fix:

After this line "Element.setSrc('lightboxImage', imageArray[activeImage][0]);" add the following:
----------------------------------------------------------
var maxHeight = 480;
var maxWidth = 480;

if (imgPreloader.height > maxHeight)
{
newWidth = parseInt((maxHeight/imgPreloader.height) * imgPreloader.width);
newHeight = maxHeight;
}
else if ( imgPreloader.width > maxWidth)
{
newHeight = parseInt((maxWidth/imgPreloader.width) * imgPreloader.height);
newWidth = maxWidth;
}
Element.setWidth( 'lightboxImage', newWidth);
Element.setHeight( 'lightboxImage', newHeight);

myLightbox.resizeImageContainer(newWidth, newHeight);
----------------------------------------------------------
- CommentAuthorgr3lla
- CommentTimeNov 6th 2007 edited
@ * SoleAngelus * CommentTimeSep 18th 2007

I have something what can resolve yours problem. its very simple, i just input modified part of code from LyteBox in to code presented by VinDSL, and I get. auto resize image, to fit image to the browser window. insert the same place as VinDSL.

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {

activeImage = imageNum; // update global var

// hide elements during transition
if(animate){ Element.show('loading');}
Element.hide('lightboxImage');
Element.hide('hoverNav');
Element.hide('prevLink');
Element.hide('nextLink');
Element.hide('imageDataContainer');
Element.hide('numberDisplay');

imgPreloader = new Image();

// once image is preloaded, resize image container and
// the image so it's no bigger than the current window
imgPreloader.onload=function(){
Element.setSrc('lightboxImage', imageArray[activeImage][0]);

// start hack by gr3lla/////////////////CODE ORIGINAL WRITTEN BY Markus F. Hay -LyteBox////////////////////////////////////////////////////////////////////////////////////////////////////
var pageSize = getPageSize();
var x = pageSize[2] - 150;
var y = pageSize[3] - 150;

if (imgPreloader.width > x) {
imgPreloader.height = Math.round(imgPreloader.height * (x / imgPreloader.width));
imgPreloader.width = x;

if (imgPreloader.height > y) {
imgPreloader.width = Math.round(imgPreloader.width * (y / imgPreloader.height));
imgPreloader.height = y;
}
} else if (imgPreloader.height > y) {
imgPreloader.width = Math.round(imgPreloader.width * (y / imgPreloader.height));
imgPreloader.height = y;
if (imgPreloader.width > x) {
imgPreloader.height = Math.round(imgPreloader.height * (x / imgPreloader.width));
imgPreloader.width = x;
}
}
// end hack///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Element.setWidth( 'lightboxImage', imgPreloader.width - (borderSize * 0));
Element.setHeight( 'lightboxImage', imgPreloader.height - (borderSize * 0));
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
}
imgPreloader.src = imageArray[activeImage][0];
},

o and I have no idea about programing in java, :D, i'm a PHP programist
- CommentAuthorkarlotta
- CommentTimeNov 9th 2007
Hi!

I tried to use your code, gr3lla, but 1. it doesn't work in Safari (the images don't resize), and 2. it disables LightBox completely in Firefox. Maybe I did it wrong; I added your code up there (right above my comment!) to lightbox.js after the line "Element.setSrc('lightboxImage', imageArray[activeImage][0]);"

is that correct?

Any idea why it wouldn't work?

Thank you for anybody's input on this! If I can't find a solution, I'll just upload pictures that fit most standard screens, but it's a shame for those with a big 30 incher, or for those stuck on 800x600...
- CommentAuthorgr3lla
- CommentTimeNov 13th 2007
hmmm... thats strange karlotta i use Firefox 2.0.0.9, and i IE 6.0.2900.2180xpsp2 and in both browsers LightBox works correctly, you can see it on my web page http://gr3lla.go.pl in gallery.

karlotta, did you add my code or replace existing code?? Maybe this is the problem! You should replace original code with my code.

I hope this help more, this is the link directly to the edited .js file. // http://www.gr3lla.go.pl/upload-gr3lla/download.php?load=lightbox.js //

good luck....
- CommentAuthorVinDSL
- CommentTimeNov 16th 2007
I made a couple of minor adjustments to my hack.

Then I tested it with MSIE 6 & 7, Firefox 2, and Safari 3 beta.

Works fine as far as I can tell... :)

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {

activeImage = imageNum; // update global var

// hide elements during transition
if(animate){ Element.show('loading');}
Element.hide('lightboxImage');
Element.hide('hoverNav');
Element.hide('prevLink');
Element.hide('nextLink');
Element.hide('imageDataContainer');
Element.hide('numberDisplay');

imgPreloader = new Image();

// Once image is preloaded, resize image container and
// the image so it's no bigger than the current window
imgPreloader.onload=function(){
Element.setSrc('lightboxImage', imageArray[activeImage][0]);

// Start hack - VinDSL (Lenon.com)
var arrayPageSize = getPageSize();
initialPageWidth = arrayPageSize[2];
initialPageHeight = arrayPageSize[3] - 200;
if (imgPreloader.height > initialPageHeight)
{
imgPreloader.width = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width);
imgPreloader.height = initialPageHeight;
}
else if (imgPreloader.width > initialPageWidth)
{
imgPreloader.height = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height);
imgPreloader.width = initialPageWidth;
}
// End hack - VinDSL (Lenon.com)

Element.setWidth( 'lightboxImage', imgPreloader.width - (borderSize * 2));
Element.setHeight( 'lightboxImage', imgPreloader.height - (borderSize * 2));
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
imgPreloader.onload=function(){}; // Clear onLoad, IE behaves irratically with animated gifs otherwise
}
imgPreloader.src = imageArray[activeImage][0];
},
- CommentAuthorouttacontext
- CommentTimeJan 24th 2008
Enabling both VinDSL's and gr3lla's final script changes gives me a fairly substantial space between the image and the edge of the window in IE 6 and Win Firefox. Is there a way to reduce that space? (Thanks to everyone for working on this issue.)
- CommentAuthorgr3lla
- CommentTimeJan 25th 2008 edited
Please explain it more? My English is not so good. Do you think about vertical, or horizontal edges? If yes, this two variable:

var x = pageSize[2] - 150; //horizontal spacing [(image width) - (prefer spacing image - window)]
var y = pageSize[3] - 150; //vertical spacing [(image height - (prefer spacing image - window)]

are responsible for space between the image and the edge of the window, i guess ;], if not, it counts I tried to help ;] hehe

good luck....
- CommentAuthoruberfu
- CommentTimeJan 26th 2008
@gr3lla (position)

var x = pageSize[2] - 150; //horizontal spacing [(image width) - (prefer spacing image - window)]
var y = pageSize[3] - 150; //vertical spacing [(image height - (prefer spacing image - window)]

===================================================================

where do you insert this or where is it located so it can be modified ?

thanks_
- CommentAuthorouttacontext
- CommentTimeJan 29th 2008
Looking at gr3lla's last code, is this it:

/ start hack by gr3lla/////////////////CODE ORIGINAL WRITTEN BY Markus F. Hay -LyteBox////////////////////////////////////////////////////////////////////////////////////////////////////
var pageSize = getPageSize();
var x = pageSize[2] - 150;
var y = pageSize[3] - 150;

I think the text that follows each line is just his pointers to what these variables do.
Thanks gr3lla. I will try that out.
- CommentAuthorMichael Hooker
- CommentTimeJan 30th 2008 edited
I'm confused. I tried VinDSL's hack in IE7, and all I got was the image on a plain white background, on the left side of the screen - no actual Lightbox elements appeared at all, no caption, no close button, nothing. IE7 also tried to tell me there was a colon missing from line 422, but I have no idea where line 422 might be. In my code, which works just fine with the original unhacked lightbox, line 422 happens to be in the middle of a php generated series of table elements giving details of my photos from a MySQL database, and if there was an error in one of those the same error would appear dozens of times before and after line 422 - 100 times, to be precise since there are 100 photos listed on the page.

I swapped over to the lightbox.js downloaded from the link gr3lla gave. That gave me a working lightbox image, except that it did not fill the screen. It had been resized downwards (and very badly, with ugly jaggies). My 1024x683 image was appearing as about 640x427. A smaller version of the same image appeared at about the right size but also mysteriously had ugly jaggies.

I am using this construction in php:

echo 'a href="' . $LPic . '" rel="lightbox" title="' . $row[1] . '"><img src="large.jpg" title="Click to bring up 1024 pixel image</a>';

$LPic is a variable containing the name of the jpg to pull up, $row[1] is the title (caption) of the photo: both are derived from the database. My link is an image of a button marked "large", large.jpg. This all works fine to pull up a small image, so I can't see that it would give any trouble with a larger one.

Does anyone have any suggestions please?

Michael Hooker
- CommentAuthorTwansparant
- CommentTimeJan 31st 2008
Hi everyone,

I just tested the latest version of the 'resize hack' from VinDSL on Nov 16th 2007, and it really works wonderfully!
Except in Safari 2.0.4 on a Mac, in Safari beta 3 on Windows it works fine!

@ outtacontext: I think you mean the change in the padding of the imageContainer, right?
You can solve that by changing the lightbox.css like this:

#imageContainer{
padding-top: 9px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
}

You simply give the padding-top some more than the left and right padding (it worked for me).
Hope I could help a little in this topic.

Thanks everyone for this amazing script!
- CommentAuthorbelalee
- CommentTimeMar 17th 2008
Hi everyone,

Any idea if this still works in v2.04? I've tried finding "Element.setSrc('lightboxImage', imageArray[activeImage][0]);" so I could put the 'resize hack' from VinDSL on Nov 16th 2007 after it but can't find it.

Thanks

Belal
- CommentAuthordragonhollow
- CommentTimeMar 20th 2008
Help! I have tried every iteration of Vin's code and I keep getting the same error 'animate not found'. It is defined at the top so I am not sure what the issue is....any ideas?

thanks...alex
- CommentAuthordragonhollow
- CommentTimeMar 21st 2008
I have found (at least in my .js file) that I am having to edit the changes to put in things like VAR that is missing or adding the this. to the activeImage and imageArray elements in the code. This gets rid of specific errors but now I am getting another error that says "'this.imageArray' is null or not an object.' I am currently searching for missing parens and brackets to see if this is the issue.....
- CommentAuthordragonhollow
- CommentTimeMar 21st 2008
I think what's happening is the difference between versions of lightbox. I am using the latest v2.04?
thanks...Alex
- CommentAuthorMichael Hooker
- CommentTimeApr 2nd 2008
Has anyone any response to my request of 30 January above please?
- CommentAuthorsmallkefto
- CommentTimeApr 2nd 2008
echo 'a href="' . $LPic . '" rel="lightbox" title="' . $row[1] . '"><img src="large.jpg" title="Click to bring up 1024 pixel image</a>';

try closing your image tag and opening your anchor tag like this

echo '<a href="' . $LPic . '" rel="lightbox" title="' . $row[1] . '"><img src="large.jpg" title="Click to bring up 1024 pixel image/></a>';
- CommentAuthorFabian
- CommentTimeApr 9th 2008
Hy guys.
I have updated the latest v2.04 version to resolve some issues and implement the automatic resizing feature.
Details are in my blog http://blog.hma-info.de/2008/04/09/latest-lightbox-v2-with-automatic-resizing/
Hope that helps!
.: Fabian

1 to 32 of 32

Lightbox Support

Lightbox v2.0: Resize images so that they are not bigger then the current window