failing like never before

24Jul/080

Lightbox Effects

So unless you've spent the last few years never clicking on an image on a web page, you're quite familiar with Lightbox-like effects (and if not with the name then at least with the effect itself). Here's an example of Lightbox2 for those unfamiliar with it.

When I say "Lightbox-like," I am referring to any kind of "effect" that allows for embedded pop-ups of images and other forms of media (i.e. flash videos, etc). The benefit of Lightbox, aside from the aesthetics, is that it doesn't result in an actual pop-up (which are often blocked by a pop-up blocker on a modern browser), or require the user to navigate to another page and then hit the browser's "back" button to navigate back to the main content. The basic idea is that Lightbox makes a visitor's life easier, supposedly.

I have two problems with Lightbox-like effects. Firstly, the Javascript files required for the effects tend to fatties. The Lightbox2 Javascript files take up 18Kb, but Lightbox2 also requires the Prototype and Scriptaculous libraries which take up 172Kb. Its not a big deal if you're site is already heavily AJAX-ified and already uses Prototype and Scriptaculous, but not everyone's site does. Quite frankly, I find it to be highly annoying that I spend so much time slimming down my images and making sure that people without lightening fast Internet connections can easily access my sites, only to have Lightbox, which is supposed to improve the visitor's experience, bog my site down by requiring 190Kb of Javascript files. There are of course, many alternatives to Lokesh Dhakar's original Lightbox and Lightbox2, many of them which are much lighter in memory. I stumbled across this helpful "Lightbox Clones Matrix" a month or so back, and it usefully lists memory sizes for each "Lightbox clone."

27Dec/070

Lightbox in Typo

A quick little explanation and demo on how to get lightbox running in Typo 4.1.1.Typo 4.1.1 uses an older version of lightbox. If you prefer to use the newer version of lightbox, then go here and download lightbox 2.0. Then, in your Typo application's public directory and overwrite the old lightbox javascript, styles, and images.

You'll also have to make sure that the theme you're using for your blog, has the necessary javascript and stylesheets included. To do this, open

/railsapp/themes/<whatever_your_current_theme_is>/layouts/default.rhtml

and ensure that the following lines of code are in your header.

<%= javascript_include_tag "typo" %>
<%= javascript_include_tag "lightbox" %>
<%= stylesheet_link_tag "/stylesheets/lightbox.css" %>

I would also like to add, that one of the javascript files needed by lightbox is massive 23kb. So if you want to keep your web page as light as possible, you may want to consider not using lightbox effects.

To use lightbox in your blog, just add the following code into the article you are posting:

<typo:lightbox src="image_link" thumbsrc="thumbnail_link" />

Here's a few examples of what lightbox can do.

"The Solid Gold Sound of the UCLA Marching Band!"