Medieval Programming

Published by Fabian on 09 Apr 2008 at 06:59 pm

Latest Lightbox v2 with automatic resizing

It seems that quite many people want to get their lightbox resizing automatically, but there were not many good solutions out there. I finally found a solution from Sebastien Grosjean, which was already integrated into a later, not yet very object oriented lightbox version, by Michael R. Bagnall. However the latest available one, which was upgraded to use latest Prototype and Scriptaculous versions, was not patched.

So this is what I did.
Please find my patched version of the Javascript and CSS file. Please take care to update image pathes in CSS and JS file. And the localization if you don’t speak German

Detailed list of changes from Lightbox v2.04:

Added automatic resize method. Controlled by featBrowser & breathingSize options.
Corrected Opera 9 fix, to prevent disortion in FireFox on slidedown.
Tweaked the overlay to resize to windowHeight, not pageHeight.
When in a slideshow the next image had no title set it inherited the title of the previous one. that was fixed.
Tweaked some default parameters (thats my matter of taste )

Many thanks to Lokesh Dhakar for creating this awesome Lightbox, that is still unmatched by soo many clones

62 Comments javascript,programming

62 Responses to “Latest Lightbox v2 with automatic resizing”

Gray on 09 Apr 2008 at 10:39 pm #

I have tried your patched version and it worked great for the auto resizing.

Thanks!
Cara on 14 Apr 2008 at 11:05 pm #

I tried uploading your js and css files directly over top of a new installation of lightbox, but it just resulted in the links opening the images in new pages, are there any other modifications I need to make that I’m not aware of?
Fabian on 15 Apr 2008 at 8:46 am #

Hey Cara,
it should basically work. It worked for me and for Gray obviously.
My assumption is that the javascript did not run correctly, thus picking not up the rel=”lightbox” links. Thus not intercepting the normal behavior of the links.
Can you confirm that it was working before applying my files?
Did you get the original Lightbox v2.04 running before?
Suppp on 15 Apr 2008 at 6:03 pm #

Bei mir kommt leider immer noch der schwarze kurze flashscreen, wenn ich über meine seite mit dem firefix surfe.
hast du vielleicht eine idee woran das liegen könnte?
Fabian on 15 Apr 2008 at 6:10 pm #

Hi Supp,
ich kann dir nicht folgen. Ich mache auch keinen support für Lightbox v2. Wenn lightbox v2 original bei dir funktioniert, aber meine Modifikation nicht, dann kann ich dir weiterhelfen.

@Everybody:
I am not giving support for Lightbox v2. There is a support forum for this. If however Lightbox v2.04 works as such and just my modification breaks something, I try to help.
Thanks
Cara on 15 Apr 2008 at 6:39 pm #

yes it did work before hand with the original lightbox ( which I have reverted to , and is currently working )

maybe it is because my images are in groups? i.e. rel=”lightbox[artwork]” that your javascript for some reason didn’t pick up on?
Fabian on 15 Apr 2008 at 6:50 pm #

strange. Is yours which is running the 2.04 version?
this requires prototype 1.6.1.
My assumption is that the dom:loaded event that is used by the new version does not fire and therefore the Lightbox does not initialize.
If it would id would pick up all rel=”lightbox” and rel=”lightbox[whatever]”
try putting a alert(‘test’) into the updateImageList method.
Cara on 15 Apr 2008 at 7:11 pm #

I fixed the problem , sorry to have bothered you when it was in fact my error, I hadn’t changed the scripts loading on my page from 2.03 to 2.04 , apologies,

your files work perfectly , thank you
Jean-Philippe Martin on 29 Apr 2008 at 10:34 pm #

Great Fix, thanks !! Solved me a lot of work !
Amber on 01 May 2008 at 4:25 am #

Thanks very much for the fix!
Peter on 08 May 2008 at 7:17 pm #

little Problem: As I just wanted to use your patch for fixing the captions problem, I changed featBrowser: true, to featBrowser: false, but then the lightbox only shows the loading gif and no picture.

Very nice patch for those having big pictures
Fabian on 13 May 2008 at 7:42 am #

Thanks for noticing Peter. I just updated the script to fix this bug. Swap lines 285 and 286, which will put the getPageSize() call outside the if block.
Sebastien Grosjean on 14 May 2008 at 10:12 pm #

Hi Fabian,

You may like to check Lightview, it’s not free anymore but really well made and the author is well reactive. It’s really worth a look for Prototype + Scriptaculous users.

Lightview : http://www.nickstakenburg.com/projects/lightview/

–
Sebastien Grosjean – ZenCocoon
Fabian on 14 May 2008 at 10:22 pm #

Hey Sebastien!
Glad that you found my blog. Once again thanks for the good input making Lightbox better

I know Nicks library, and I have already been in contact with him. At that time it was free and I asked him if he could make separate functionality modules, because the total weight of the JS is just too heavy. He responded that he has no time for it, and, of course I am not allowed to do it by myself (the CCL he chose doesn’t allow modification).

Yes his lib is a great one, but with so many alternatives out there, unfortunately the issues I have are showstoppers.

Actually currently I am running on MooTools which makes a lot of fun, Moo itself is very modular and there are very modular libs out there which have a lot of functionality. I don’t really understand why Moo 1.2 is not that backwards compatible to 1.1 but okay.
I feel somehow that prototype and scriptaculous development and community has stopped.
Sebastien Grosjean on 16 May 2008 at 11:21 pm #

Hi Fabian

I’m really glad you like the small patch I’ve done for lightbox

You absolutely right with Nick’s library, I regret that he keep it “closed source like” as it breaks patch like we both have done to see the life and make things better over time.

Regarding the weight, I now merge my JS files, minify them then compress with GZIP if browser support and add the expire header of 10 years. On top of this I load my JS at the end (so forced to be full unobtrusive).

The final result is that visitors load the JS about 3-5 times faster and if no change or cache cleaning only once as well.

Regarding mootools I just got my eyes on it as I will certainly work on porting Slideshow 2! to Prototype (main project using mootools 1.2).
Regarding the modular aspect, there’s the good and bad side I guess. For really targeted usage it’s really easy to get light weight dependency but when dealing with more JS plugins and once the compression done the weight difference is not much and you save lot of time changing your mootools file I guess.

Anyway that’s always a matter of preference and specific needs, once you get what’s making you happy and does the job it need

As far as I know Prototype and Scriptaculous are not dead
–
Sebastien Grosjean – ZenCocoon
James on 27 May 2008 at 1:19 pm #

Hi Fabian,

Your fix has really helped me too.

Thanks very much for your work and making this available to the public.

James
Kay on 16 Jun 2008 at 5:59 pm #

Thanks for this excelent code, it was just the functionality I was looking for.

Do you have a code example where you start the slideshow from a button instead of clicking an image.

Kay

Kay on 18 Jun 2008 at 9:25 am #

I get an javascript error the first time I open each picture. Everything works fine but I get the error. The error message is :

Line: 1922
Char: 9
Error: Invalid argument

This is located in the prototype.js file:

setStyle: function(element, styles) {
element = $(element);
var elementStyle = element.style, match;
if (Object.isString(styles)) {
element.style.cssText += ';' + styles;
return styles.include('opacity') ?
element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
}
for (var property in styles)
if (property == 'opacity') element.setOpacity(styles[property]);
else
elementStyle[(property == 'float' || property == 'cssFloat') ?
(Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') : property] = styles[property];
return element;
},

any idea why this happens?

zac on 06 Jul 2008 at 11:55 am #

Hi, Thanks for writing and posting this fix. I do not understand why, but the image size is still not limited to the height of the browser window for me. Otherwise lightbox works as usual, but that is how I was led to your blog, searching for an answer for that problem. Any ideas on why it still does not work? I am using Firefox 2.0 and I only copied the js file not the css.
SteveS on 31 Jul 2008 at 5:09 am #

Hello Fabian,

Your version of lightbox (with automatic resizing) is exactly what I have been seeking and it works great in all respects with one exception. If I scroll down the page and then execute your routine, the dark gray background does not appear around the picture. It appears only at the very top of the page (not visible until I scroll back up to the top). The unmodified version of lightbox 2.4 functions correctly. Here is a sample page for you to view http://www.bmwmoal.com/pictures/towncreek.html

Any help would be appreciated. Your work on this is very much appreciated.
SteveS on 02 Aug 2008 at 11:52 pm #

Found the problem – As you stated in your changes list “Tweaked the overlay to resize to windowHeight, not pageHeight.” This was causing (obviously) the overlay not to cover the window when scrolled down (not sure why you would want it this way).

I changed it back to windowHeight and now all is well with me.

Again – Thanks for the resize code.
Korx on 15 Aug 2008 at 12:46 pm #

I can’t find that place where i can translate that “Bild 1 von 15″. When I put on Fabian JS, the Next ja Prev arrow’s are gone. I am not good @ JS. So if u can help me I woul’d be very thanful

Have nice day, Korx.
Budimir on 15 Aug 2008 at 9:39 pm #

This worked perfectly. Thanks so much!!!!!
ingo on 18 Aug 2008 at 6:45 pm #

Just curious, is it possible to modify the script so that we can display images wider than the container with a scrollbar ??
My idea is simply having a fixed width (in my case 820 px) , which i already changed in the script, and than to display a panorama picture inside with a width of 2000 px which you can scroll left-right inside the 820 px container.
Charlotte on 26 Aug 2008 at 11:16 am #

Hey, thanks! just one question: how can I change the German subscript like “Bild 1 von 4″ ?
Fabian on 31 Aug 2008 at 5:17 pm #

Krox & Charlotte:
It is in the JS file:

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: “Bild”,
labelOf: “von”
Laura on 02 Oct 2008 at 10:18 pm #

Hi,

Does the auto-resize acutally reformat the picture? I need to resize without any image distortion from being reduced in browser. I’m trying to use litebox and auto-resize on cheap ecommerce software (Will definately make a donation if I can get it all working successfully!).

Thanks for the help!
Fabian on 05 Oct 2008 at 11:28 am #

Hi Laura,
no it does not. But keep two things in mind:
a) for this to happen your picture has to be larger than the viewers viewport. This is more likely to happen at any social networking site where users can upload pictures without respecting any guidelines. In a shop I would give the uploader strict dpi and size constraints.
b) Browser downsampling algorithms are quite ok, as long as you leave the aspect ratio intact. Breaking the original aspect ratio is quite unlikely to happen.
Antoine on 23 Oct 2008 at 4:42 am #

Hello,

I am basically having the same problem as steveS. If I am on the top of the page the backgroundoverlay works great, but than I close the image scroll down and pop another image and the overlay is still just on top.

He said he fixed it, but I can’t seem to know what he did.

I would have emailed him, but nowhere to find his email.

Thanks

SteveS on 31 Oct 2008 at 6:47 pm #

Antoine,

In lightbox.js Change

From at line 219:

        $('overlay').setStyle({height: arrayPageSize[3] + 'px' });

To:

        $('overlay').setStyle({height: arrayPageSize[1] + 'px' });

and

From at line 306:

        this.overlay.setStyle({ height: arrayPageSize[3] + 'px' });

To:

        this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });

davidcool :: portfolio :: blog » Blog Archive » Lightbox 2 and problem solutions on 01 Nov 2008 at 7:52 am #

[...] So I dug around on the internet and found a javascript programmer that came up with a solution. Fabian Lange integrated the javascript to make the resizing automatic. You can find the source code for the css [...]
Calvin on 13 Nov 2008 at 5:03 am #

Hi Fabian,
THANK YOU so much for adding to the already amazing Lightbox! It’s like a dream come true!!

and thanks to SteveS for the corrections… it would have taken my very bad js skill forever to figure that out.
Alexander on 09 Dec 2008 at 2:17 pm #

Thanks.
jaywall on 22 Dec 2008 at 9:38 am #

Hey Fabian,

So I was comparing your lightbox with Sebastien’s. One thing that I notice on the appearance is that your “overlay background” is cut off when I scrolled down on the screen.

I’m not sure if you’re aware of it, but just an fyi though.
Dennis on 03 Jan 2009 at 12:53 am #

Hello,

First of all, thank you very much for making this great functionality available.

Is it possible that the automatic resizing does not work in Firefox 3.0.5 ?

thanks in advance!

francodag on 23 Jan 2009 at 5:10 pm #

Hi,
Thanks for this solution.. In my case i’ve also added a link to a big image as

this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length+ "<a>Visualizza l'immagine a dimensione originale</a>").show();

at line 381

Hoang on 01 Feb 2009 at 1:38 pm #

I think the code francodag wants to show is

this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length+ " <a href='" + this.imageArray[this.activeImage][0] + "' rel="nofollow">Click here to view Full-size</a>" ).show();

Terry on 18 Feb 2009 at 6:28 pm #

Works nice.
Joe on 26 Feb 2009 at 10:03 pm #

Hi Fabian!

Thank you for that great modification!

John K. on 02 Mar 2009 at 5:03 pm #

Thanks for this, works brilliantly.
I added something small in addition to what Hoang suggested in order to allow viewing of full size.

//At top of page add 
var IsResized = false;
....
//Then in updateDetails add
if(IsResized) {
	this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length + ' <a href="' + this.imageArray[this.activeImage][0] + '" rel="nofollow">Original Size</a>').show();
} else {
	this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
}
 
//And in adjustImageSize change the maxwidth check like this
if (imgWidth < maxWidth || imgHeight > maxHeight) {
	IsResized = true;
	imgWidth = maxWidth;
	imgHeight = maxHeight;
} else {
	IsResized = false;
}

That way Hoang’s link is only shown if the image HAS been resized.
Cheers.

Ludo on 10 May 2009 at 11:27 pm #

Many thanks !! it works very well;)
Cvetomira on 14 May 2009 at 2:50 pm #

Ok Thank you~ but now when i make group of pictures and i use your modification …. its not show to me nex and preview gif anymore Any idea?
Zambini on 21 May 2009 at 12:00 pm #

Thank you for this. I have been searching for this for quite some time
I coupled this Lightbox Gallery { with http://wordpress.org/extend/plugins/lightbox-gallery/ } so I can have your re-sized one for individual images or use the gallery with large photo sets.

Note: for Gallery, I changed the line that said
‘lightboxsize’ => ‘medium’,
I changed to say
‘lightboxsize’ => ‘large’,
because that way it would show whatever “large” is pre-defined as in WordPress. Its just enough to fill most normal screens. It filled my 1400×900 screen quite well

Thank you again!
Lightbox 2 mit Auto-Resize in Wordpress - Lightbox, Wordpress, Plugin, Bild, Version, Lange - noox bloggt! on 28 May 2009 at 11:19 am #

[...] der Recherche nach Auto-Resizing für die Lightbox 2 bin ich auf den Blog-Eintrag “Lates Lightbox V2 with automatic resizing” von Fabian Lange gestoßen. Er hat die Lightbox v2.04 um die Auto-Resizing-Funktion [...]
Robert on 08 Jun 2009 at 5:23 pm #

Hey man,

you are the best!

tnx
Gheilt on 23 Jun 2009 at 12:19 am #

Thanks a lot.
thetime on 30 Jun 2009 at 7:02 am #

Thanks for providing a method to resize images.

I cannot get John K’s or Hoang’s method to unresize the image to work correctly. Could someone possible upload their lightbox.js with this modification included
maddog107 on 01 Jul 2009 at 7:56 pm #

First thanks John K and Hoang as this is almost what i needed.

Thetime, here is the full JS file I am using on my site that seems to be working fine.

http://snipt.org/knG
Lightbox 2 with Auto-Resize in Wordpress - nooxnet.com on 12 Jul 2009 at 3:49 pm #

[...] I was looking for auto-resizing functionality for Lightbox 2 I found the blog post “Lates Lightbox V2 with automatic resizing” written by Fabian Lange. He added auto-resizing to Lightbox V2.04 without changing much of [...]
jiaix on 14 Jul 2009 at 1:34 pm #

umm … first it worked beautifully in MF, but failed in IE and GC. then i added a loose doctype and now they all kind-of work … BUT the image is placed waaaaay down the page. once i removed #lightbox from .css file, it centered alright again (at a cost of losing overlay).

any recommendations?
Vadim on 04 Oct 2009 at 12:34 am #

Hey Fabian,

Thank you, your changes are very helpful,

But as jaywall said, there is a problem when I scrolling down the page,
I can see the ending of the background overly and the page stays white…
How can we solve this?
aamir on 14 Oct 2009 at 10:08 pm #

Hi,

Thanks for the resizing fix. I can’t figure out how to get the close.gif to show up. I tried to change the line that says,

fileBottomNavCloseImage: ‘/images/lightbox/closelabel.gif’

to

fileBottomNavCloseImage: ‘/images/closelabel.gif’

in the .js file. Can anyone tell me exactly what needs to be changed in the .js file, i’m not a programmer at all, so i’m not sure what’s controlling what. Thanks!

-ak
aamir on 14 Oct 2009 at 10:20 pm #

Hi, I think the problem is solved with making it an absolute path. Thank you.

-ak
andy on 06 Dec 2009 at 2:59 pm #

this is great solution but close image option get disappear. why this is so?
is there any solution for that
Rich on 13 Dec 2009 at 12:22 am #

Thank you so much. It works perfectly!

Thank you again.
Radu on 17 Dec 2009 at 11:13 am #

Hi,

I tried your patch and it’s working fine in Firefox and IE, but it doesn’t work in Chome. Any ideas how to make it work? I tried the loose doctype like someone said before but it still doesn’t work.
Nadidz on 17 Dec 2009 at 12:07 pm #

Hey,
das klappt super, nur bei mir wird die Grafik “closelabel.gif” nicht mehr angezeigt =(

Wäre dankbar um Hilfe.

LG
Jeroen on 03 Apr 2010 at 11:39 pm #

thank you for de .css and .js
This was what i looking for !!
Becky on 07 Jul 2010 at 5:12 pm #

I was so glad that you posted your solution to the Lightbox forum, which allow me to find your site. After battling with the problem for hours (and I don’t know Java Script), I was on the edge to look for another lightbox app, but then I found you. You solution works great. Thanks for sharing!
Becky on 08 Jul 2010 at 12:00 am #

Thank you for making the resize part work.

The only issue I found is with the black overlay. After I scroll down to the picture I want to click on, the black overlay does not follow the “new” area. It still remains at the initial position, leaving some space not covered.

Thank you again!
mr.pete on 08 Jul 2010 at 8:03 pm #

Yeah, I had the same issue with the overlay staying up top, when running this script lower in the page. Thanks SteveS for marking the changes to fix it. And thanks Fabian!!! Works wonders.
Alex on 13 Jul 2010 at 2:32 pm #

Great work, appreciate that