YUI Based Lightbox – Revisited

YUI Lightbox
YUI Lightbox with Dependencies
Download YUI 2.3.0
Run Online demo

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, 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.

Note: This version of lightbox is specifically designed for viewing images. If you need to place HTML contents, check my previous article.

Step 0: Dependencies

YUI 2.3.0 or greater. Download

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:

Step 3: Create the corresponding HTML markup:

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

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.

Run Online demo

The Complete Source Code

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

104 Comments YUI Based Lightbox – Revisited

  1. Pingback: Javascript Effects to Boost your Website | php genious

  2. Pingback: Yahoo UI Lightbox, Otra bonita forma de crear nuestros Lightbox | Descargar Yahoo UI Lightbox, Otra bonita forma de crear nuestros Lightbox | Gratis Yahoo UI Lightbox, Otra bonita forma de crear nuestros Lightbox | BlogGraphic.com - Templates - Themes Wor

  3. Pingback: revues casinos

  4. Pingback: links for 2009-03-09 : Eggplantia5

  5. Pingback: links for 2009-03-15 « Amy G. Dala

  6. Pingback: links for 2009-03-16 « Amy G. Dala

  7. Pingback: Tagz | "YUI Based Lightbox - Revisited : Code Central" | Comments

  8. mvega


    Currently I have implemented a dojox.Gallery. I was wondering if it is possible to display this gallery into yui lightbox.


  9. Pingback: ShadowBox, Ligthbox y demás script de contenido multimedia « DeCabeza.net

  10. cerita dewasa

    I came across your site while searching on MSN and have now added you to my rss reader. I Just though i should say “keep up the good work” and pass on congratulations on a job well done ! I am really looking forward to seeing more from you in the future.

  11. video bokep

    Wow - I found this through google and read several of your other posts - added ya to my G Reader, Keep up the good work. Looking forward to reading more each day.

  12. tworzenie-stron-www

    sieć ani chybi jest największym wynalazkiem dwudziestego wieku. Na początku puder on podać służbą specjalnym Stanów Zjednoczonych do tworzenie stron www wymiany poufnych informacji, lecz szybko okazało się, że prawdopodobnie dysponować inne wykorzystanie. Tworzenie stron www stało się powszechniejsze i ludzie mający admitancja aż do Internetu, który z powodu kiedy niekiedy się upowszechnił, mogli zamieszczać

  13. Cerita Dewasa 2010

    About comment Garth Brown i agree, The problem is, when you Escape these characters, Lightbox will break. To fix this, you can UnEscape this string in Lightbox.js, this is great..Thanks for share..

  14. Pingback: How to Create a YUI Based Lightbox « Jbloo

  15. Pingback: Lightbox / bildvisare - hela listan! - jQuery, Prototype, MooTools | jenst.se

  16. Pingback: pligg.com

Comments are closed.