YUI Based Lightbox – Final

My previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for upcoming updates and bug fixes. So if you've found any bugs, feel free to report them in the comment section of this post.

Also, I would like to thank many who reported bugs and gave feedbacks after the release of previous image lightbox. As many have requested, I implemented navigation for the new lightbox. In addition to the navigation, numerous new features have been added and bugs have been fixed.

yui-gallery-ss1.gifyui-gallery-ss2.gif

Continue reading

YUI Based Lightbox – Revisited

Note: This script has been updaed

In the previous article of YUI based lightbox, 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

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.

Continue reading

Creating Lightbox with Yahoo! User Interface Library

Demo Updated (8/29/2007): In addition to the image lightbox demos, I added four more types: text content, web page, web page with video, and embedded video. Check it out.

Yahoo! User Interface Library (YUI) provides a very handy class for creating modal dialog box with background masking, which can be used to create lightbox. If you have no idea what a lightbox is, you can run this online demo to get a taste of what it looks like.

Lightbox Demo

There are several advantages to use YUI to create lightbox. The most important one is you get cross-browser compatibility support out-of-box. The above demo has been tested in IE 6, Firefox 2.0.0.4, Netscape 8.1, Mazilla 1.7 and Opera 9.21, which was created without any hacking. Another hot feature is that one can easily create a drag & drop lightbox without any extra effort.
Continue reading