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.
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 18.104.22.168, 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.
Include YUI to Your Page
- You will need to download Yahoo! User Interface Library.
If above instruction is unclear, you can view demo's source code to see which files were included.
The HTML Markup
Create a lightbox markup using the following template and YUI will do the rest of the job for you. Note that the class name of the lightbox elements has to be "hd", "bd", "ft", otherwise YUI won't regconize them. The CSS classes correspond to header, body and footer of the light box.
<div id="lightbox_id"> <div class="hd">Please enter your information</div> <div class="bd"></div> <div class="ft"></div> </div>
Instantiating the Dialog class
The next thing you have to do is instantiate an Dialog box so that it can be used to create our lightbox.
The first line declares a namespace for this script. Although this is not necessary, it will help you to avoid possible variable naming conflicts later in your script. Once a namespace is created, it can be used to hold any kind of variables. In this case, the variable is
We supplied the Dialog's constructor an ID and a configuration object. The ID came from the template we just created from the previous step. The configuration object can have any of the properties listed in here. For most of the time, you probably want to have both modal and draggable set to true.
YAHOO.com.thecodecentral.dialog.render() will prepare the dialog box to be displayed on screen. Believe or not, that's all the code you need to create a lightbox.
render(), you can show and hide the lightbox by calling its show and hide method respectively.
YAHOO.com.thecodecentral.dialog.show(); or YAHOO.com.thecodecentral.dialog.hide();
Put Everything Together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="js/yui/container/assets/container.css"> </link> </head> <body> <input type="button" value="Show Box" onclick="YAHOO.com.thecodecentral.dialog.show();"/> <div id="myLightbox" style="background-color:#000000;color:#FFFFFF"> <div class="hd" style="background-color:#000000;color:#FFFFFF; border:0"> Lightbox Sample </div> <div class="bd" style="text-align:center;"> Content of this lightbox, can be any HTML markup </div> <div class="ft"> Footer, optional </div> </div> </body> </html>
- Note that you can insert the code which initializes the dialog within HEAD or BODY tag of the HTML document. However, for maximum browser compatibility, it is advisable that you put your initialization code between the HEAD tag and invoke it upon the browser's window onload event.
- The style
.maskis optional. It was there because the default mask in YUI is too bright for our purpose. What being done is that we simply override the style
.maskto make the background mask darker.
- If you want to hide the header of the dialog, set both close and draggable property to false and don't include "hd" DIV to your template.