YUI Lightbox

While working on my last project (Floating Cart for Yahoo! stores) at Yahoo!, I came across an application called Lightbox. The reason it drew my attention was incompatibility with our application. Our customers who had lightbox were facing issues using the Floating Cart. The problem was not with the lightbox application, but the javascript framework called Prototype that was used to create the application. I’ll post the details about this in some other post, let’s move to lightbox for now.

So you must be wondering what lightbox is? It’s a simple but useful application to overlay images on the current page. Simply speaking, if you are on a webpage with multiple image thumbnails which link to the actual images, using lightbox the images will open up on the same page in a modal window. To add this feature, you just need to add the lightbox script (and all dependencies) to your website. There are multiple versions of lightbox available on the internet but this one is the most popular. It uses Prototype javascript Framework and Scriptaculous Effects Library.

This weekend I spent a few hours trying to create my own version of lightbox using YUI 2. Its a very basic implementation and uses the Panel widget from YUI. I also added a few effects to it. Since ContainerEffect contains only SLIDING and FADING effects, I added a few of mine.

The demo can be viewed here: YUI Lightbox Demo

Installation

The lightbox script can be downloaded from here: lightbox.js lightbox.css

To make lightbox work, you need to add the following YUI javascript and CSS files to your page:

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js" type="text/javascript"></script>

Initialize

Use the following code within script tags in your HTML page to initialize lightbox:

function initLightbox() {
    var lightbox = new YAHOO.odhyan.Lightbox;
    lightbox.init();
}
YAHOO.util.Event.on(window, 'load', initLightbox);

HTML to use

Its very easy to add lightbox to any of your links. Just add a classname of yui-lightbox to your anchor element.

<img src="img/image1_thumb.jpg" alt="" />

For better understanding, view the code of index.html

You can customize the lightbox style by adding your own styles to lightbox.css

This is not the first lightbox implementation using YUI. There already exists one and can be viewed here.

Links

• Online Demo
• lightbox.js
• lightbox.css