By now you’ve probably seen a “lightbox” effect somewhere on the Web – even if, like me, you didn’t know the name for it. “Lightbox” is the term widely used for that neat effect where a web page displays an image by popping it up into an overlaid box and dimming out the background. You can generally click or hit a key to dismiss the lightbox overlay. The fancier ones offer a variety of display options, and things like the ability to display a group of images in the lightbox as a slideshow.

I started looking for information on how to produce this effect because I want to use the technique within our installation of Confluence. I found there are quite a number of these libraries, each with different features, strengths and weaknesses. I thought I’d take this blog post to go over what I found.

All of these tools, by the way, are created with a mixture of Javascript and CSS. In general, you deploy them by linking to both the Javascript and the CSS file from your web page, then putting one or two special attributes (like a “rel” attribute or a CSS class) into the tagging for the content you want to display in the lightbox. Some of these libraries are intended for use only with images, while others allow you to display other things, like inline content, or even content from another page altogether, which is what I was after.

The original Lightbox

The original Lightbox script, by Lokhesh Dhakar, is now updated and called Lightbox 2. The web page has good examples of its use. This script is only for images and image sets, so I did not investigate it further. The display seems very clean and elegant. Like many, though not all, of these toolkits, it uses some third-party JS libraries (the Prototype framework and the Scriptaculous library). It doubtless makes a lot of sense to leverage these toolkits, but it also means sending more code to the browser and can get complex if you’re integrating into a framework like Confluence.

Thickbox

As I said, a number of these scripts are images-only. I wanted to pop up an entirely separate web page in the box. So I moved on, to Cody Lindley’s Thickbox. This script can display ANY sort of content in the popup. There’s lots to like here in terms of functionality. I ultimately decided not to use it for two reasons: firstly, the CSS appeared to have a bad effect on my Confluence site CSS (though later investigation suggests I may just have needed to restart Confluence), and the typography, styling and display were not quite as slick as some of the others. In fairness, the author makes it plain that he created the script as a proof of concept, and it is readily amenable to tweaking, polishing, etc. The basic functionality seems very sound. Thickbox also uses an additional JS library, in this case the also-very-popular jquery.

Slimbox

Slimbox, by Christophe Beyls, bills itself as a more efficient (hey, when it did become the style to write that as “more-efficient”? That drives me nuts) Lightbox clone. Like Lightbox, it is images-only. It uses jQuery instead of Prototype and Scriptaculous. It claims to be heavily optimized and a good bit faster. Clicking through the examples lends some credence to this, but many factors could play into that. Like other scripts, this one is well documented and free.

Lytebox

The script I finally settled on (and believe me there were many more I did not get to looking at) is called Lytebox, by Markus Hay. Lytebox ultimately filled the bill for me for the following reasons:

• not limited to images
• entirely self-contained JS and CSS, does not require inclusion of entire libraries, which could further bloat the already sizable JS/CSS payload coming down from Confluence.
• nice-looking design

I dropped Lytebox into my Confluence install (ok, to be more accurate, I dropped it in via the all-important Theme Builder plugin I use to customize Confluence CSS and JS) and it Just Worked.

Hopefully this brief overview of Javascript “lightbox” technologies has been helpful. And if you do a Google search you’ll find dozens more links on this topic.

I talked to Russ Kohn today, and he is working on a project using FMProxy. Interestingly, he’s re-tooling it to be used with javascript, which kind of proves the point that FMProxy is not a Flex-only solution. He had some feedback in terms of making better basic examples to help developers get up to speed faster and unleash the power of FMProxy.

So here is I what I put together to make it a bit easier to initially set up and debug your proxy. It’s an HTML form, similar to the one included in the original whitepaper, for submitting simple POST requests, and a very simple proxy.php example that is a bit more useful than the straight passthrough example and a bit simpler than the login example (both shown as examples in the original whitepaper).

See the FMProxy link above, or the direct link to the zip further down in this post if you want to checkout the original whitepaper.

(more…)

I’m at MAX2007, sitting in Andre Dragomir’s session, Integrating Flex with Ajax and the Browser. He was demoing an Adobe library that you can insert into an Flex application, a Flex component, or even an empty SWF file to expose it to scripting in the browser. Nice!

http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge

This allows developers to access the methods an properties of the Flex app with Java Script. This has huge positive implications for our ability to integrate Flex widgets into both FileMaker via the web viewer and PHP applications delivered on a browser.

A FABridge wizard is built into Flex Builder 3.

The presenter also demonstrated deep linking using JS (unfortunately this JS differs from browser to browser). His example uses parameters after a hashmark, so the browser doesn’t refresh. Example:

http://www.somesite.com/theflexpage.html#page=123