Archive for April 9th, 2008

Published by Fabian on 09 Apr 2008

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

Published by Fabian on 09 Apr 2008

Javascripts should be fun and small

I rarely do blog posts just to link to somebody else, because I think my blog is not read by so many people that anyway wouldn’t have discovered that link otherwise.

So I suppose you seen this already Super Mario in Javascript made by Jacob Seidelin. There are many aspects of it what I like:

  1. Its fun to play
  2. It again proves that javascript is a language capable of doing such things
  3. It uses inline graphics. Thats right, no external files. While this is not a problem in any other scenario, in web it saves that extra http request, that with such small sprites adds a lot of overhead.
  4. It is awesome small. Just lately I played around with some Cover Flow js widgets (namely ProtoFlow and ImageFlow, in combination with HighSlide and LightBoxv2) and I was very disappointed that these libs are just that huge. I am willing to take extra bytes for eye candy, but I wont take 40KB just for opening a enlarged version of an image.
  5. It is compressed but not packed. Many people use Dan Edwards packer to make their Javascript smaller. This indeed brings a few bytes, however on every page load the browser has to unpack the script. Even the cached one! I found statistics on this some time ago, unfortunately cannot find them anymore, but they, additionally to common sense, convinced me that packing Javascript is not a good idea.

A very interesting idea is that he aliases some often used functions:

appChild = function(parent, child) {return parent.appendChild(child);}

by doing so YUI Compressor can shrink the method name, because its a local variable. Pretty neat idea.

Now back to ProtoFlow coding :-)

Ah by the way, does anybody have a better,smaller alternative for lightboxv2?
Features should be: Fade background, display caption, handle multiple pictures in a row (next+prev) Autoresize to screen (a feature that LightBox doesn’t handle). Ideally it should use Prototype and scriptaculous, as this is already set for the project. And it should be small. YUI compressed less than 15k