January 05, 2011

Float images using Lightbox JS

Every blog post on the site is now 13 kilobytes heavier, thanks to a very nifty script created by Lokesh Dhakar. The script is called Lightbox JS. It is now part of the template.

When I had chosen the template for blog and site, the focus was to ensure readability. So the width of the main text area is limited to about 450 pixels. Unfortunately 450 pixels is not much of a size for pictures and photographs. So I needed a way to quickly show a larger picture in the same page, without just making the full image open in a new window.

Enter Lightbox, the script is a quick and easy way to display images in a layer on top of the page, without changing anything underneath. And all it needs, in addition to setting up the script, is to add a rel="lightbox" to the anchor tag. Love the script - no wonder it has a wikipedia entry as well. Not much of a fan of the V2 though, that uses the Prototype Framework and Scriptaculous Effects Library. Loses one of the biggest selling points - unobtrusive size.

No comments: