YUI Based Lightbox - Revisited

[quote][/quote]
YUI Based Lightbox – Revisited
Posted on August 17, 2007
Filed Under Javascript | 104 Comments

Table of Contents:
* Step 0: Dependencies
* Step 1: Installation
* Step 2: Create a data source
* Step 3: Create the corresponding HTML markup:
* Step 4: Instantiate a Lightbox Object
* The Complete Source Code
* Related Readings
[align=left]
[img]http://dl.iteye.com/upload/attachment/306020/15ae9627-d758-3148-9a63-580a0a837106.gif[/img][url="http://thecodecentral.com/wp-content/uploads/2007/08/yuilightbox.zip"]YUI Lightbox[/url]
[img]http://dl.iteye.com/upload/attachment/306020/15ae9627-d758-3148-9a63-580a0a837106.gif[/img][url="http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip"]YUI Lightbox with Dependencies[/url]
[img]http://dl.iteye.com/upload/attachment/306020/15ae9627-d758-3148-9a63-580a0a837106.gif[/img][url="http://developer.yahoo.com/yui/"]Download YUI 2.3.0[/url]
[img]http://dl.iteye.com/upload/attachment/306010/ee86aba4-c82b-355b-b003-64c58276e3e4.gif[/img][url="http://test.thecodecentral.com/demos/lightboxrev/lightbox.html"]Run Online demo[/url]
[/align]
Note: This script has been updated

In the previous article of [url="http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library"l]YUI based lightbox[/url], I've shown you how easily one can create a lightbox using YUI's Dialog class. Although the lightbox we created in the previous article has the basic skeleton of a lightbox, it still lacks some crucial features and it looks quite ugly. Luckily YAHOO released YUI 2.3.0 not long ago, which included an eye candy skin (sam) that is more attractive than one bundled by default. We will use the new skin for the revised lightbox. Since we don't need all the features provided by the Dialog class (e.g., submitting data), I replaced the Dialog class with Panel for the container class of the new lightbox.

A picture is worth a thousand words, so here is a screen shot of our new lightbox:Lightbox Demo Screen Shot
[url="http://thecodecentral.com/wp-content/uploads/2007/08/lightbox-beta.jpg"][img]http://dl.iteye.com/upload/attachment/305997/483ae58b-b0d4-39b0-b868-e2b0bd02c447.jpg[/img][/url]

I might have mentioned this before, but I couldn't address enough the helpfulness of a JavaScript framework in dealing with cross-browser compatibility issues. By using a framework, the new lightbox is compatible with majority A-Graded browsers and it was created with minimal effort. Once again, it has been tested in the following browsers: Firefox 2.0.0.6, Netscape 8.1, IE 6, IE 7, Mozilla 1.7.13, Opera 9.21.

The lightbox incorporated many new features, along with old features such as drag and drop, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser's window area). You can also hide the lightbox conveniently by clicking on the image.

[color=red]Note: This version of lightbox is specifically designed for viewing images. If you need to place HTML contents, check my [url="http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library"]previous article[/url].[/color]

Step 0: Dependencies

YUI 2.3.0 or greater. [url="http://developer.yahoo.com/yui/"]Download[/url]
Step 1: Installation

Include the following files to your HTML page, keep the JavaScript files in that order:

* [path-to-yui]/yahoo-dom-event/yahoo-dom-event.js
* [path-to-yui]/dragdrop/dragdrop-min.js
* [path-to-yui]/container/container-min.js
* [path-to-lightbox]/Lightbox.js
* [path-to-yui]/assets/skins/sam/container.css

Step 2: Create a data source

The data source is simply a JavaScript object that consists of many tuples, and each tuple contains information of the image which we are going to attach a lightbox to. A tutple has the following format:

imageId : {url: pathToImage, title: titleOfTheImage}

URL specifies the location of the actual image. The title is an optional attribute. Here is an example of data source:

var dataSource = {
  image1:{url:"photos/rocks.jpg", title: 'Rocks'},
  image2:{url:"http://thecodecentral.com/yui.jpg"}
};

Step 3: Create the corresponding HTML markup:

<img src="photos/rocks-small.jpg" id="image1"/>
<img src="http://thecodecentral.com/yui-small.jpg" id="image2"/>

Above HTML code creates two thumbnail images of the original images. Note that each image has an ID attribute, which is corresponding to the ID attribute in the data source we created earlier. This ID has to be unique, or otherwise the lightbox won't be able to locate this image.
Step 4: Instantiate a Lightbox Object

var lightbox = new YAHOO.com.thecodecentral.Lightbox({
    imageBase:'js/lightbox', 
    dataSource: dataSource
});

Call the Lightbox's constructor to create a new instance. The constructor takes a configuration object, which contains two attributes:

* imageBase is the path to the images that are needed to render the Lightbox class. Normally this is the same as the location where the lightbox.js resides. You must not add any tailing slash to this attribute.
* dataSource is discussed here.

You are done! That's all you need to do for our lightbox to function.

[img]http://dl.iteye.com/upload/attachment/306010/ee86aba4-c82b-355b-b003-64c58276e3e4.gif[/img][url="http://test.thecodecentral.com/demos/lightboxrev/lightbox.html"]Run Online demo[/url]
The Complete Source Code

<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />

</head>
<body>
<img src="photos/rocks-small.jpg" id="image1"/>
<img src="http://thecodecentral.com/yui-small.jpg" id="image2"/>
</body>
</html>

A few things to keep in mind if you have problems:

* When instantiating a Lightbox class, please remember that not to add any tailing slash to the imageBase attribute.
* The order of which the JavaScript files are included matters.
* It is always a good idea to defer the instantiation by attaching the instantiation scrip to browser's onload event. That's exactly what this line does: YAHOO.util.Event.on(window, 'load', init);.
* This lightbox class is still in beta. Although I have tried my best effort to make it bug free, it is practically impossible to do so.
* I check comments regularly. Bug report, feature request or suggestions are welcome. Just post them in the comment section.

Related Readings

* [url="http://thecodecentral.com/2008/01/01/yui-based-lightbox-final"]YUI Lightbox Final[/url]
* [url="http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library"]Content Based Lightbox[/url]
* [url="http://developer.yahoo.com/yui/container/panel/"]YUI Panel Class[/url]
* [url="http://thecodecentral.com/2007/09/13/easy-json-encodingdecoding-in-php"]Easy JSON Encoding/Decoding in PHP[/url]