Creating Lightbox with Yahoo! User Interface Library

Posted on July 13, 2007
Filed Under Javascript | 20 Comments

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

Include YUI to Your Page

You will need to download Yahoo! User Interface Library.
Follow this instruction (the Getting Started section) to include all necessary CSS and JavaScript files. You will need to modify the include path accordingly.

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 YAHOO.com.thecodecentral.dialog.

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.

The call 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.

After calling 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>

Remarks:

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 .mask is 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 .mask to 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.

Links

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.

20 Comments so far

YUI Based Lightbox - Revisit : Code Central August 17, 2007 1:53 pm

[...] the previous article of YUI based lightbox creation, I've shown you how easily to create a lightbox using YUI's Dialog class. Although the lightbox we [...]
Ajax Girl » Blog Archive » YUI gets a sharp-looking lightbox August 28, 2007 7:02 am

[...] lightbox implementation. Cuong over at Code Central has taken on the task of building a lightbox by first showing how easy it is to create one in YUI! and then making it look slick using YUI 2.3.0’s eye candy skin. The lightbox incorporated [...]
??YUI?Lightbox by The Third Part August 28, 2007 7:08 pm

[...] ??????????Lokesh Dhakar??prototype?scriptaculous???lightbox2??Cuong???YUI ????????????????????????? [...]
willunion November 21, 2007 1:52 pm

I like to use YUI interact with form. With YUI, I can drag pre-loaded element and drop into some location then submit the form. Any ideas?

Thanks,
Cuong November 23, 2007 11:31 pm
Assuming you've already coded your drag&drop logic, you can insert a hidden field into the form tag. Update the value of hidden tag whenever a new element is added to the drop area.

<pre>
<form action="bla">
<input type="hidden" name="dropElems" id="dropElems" value="" />
</form>
```
Code for updating hidden field:

var dropElems = YAHOO.util.Dom.get('hidden');

dropElems.value += newElemId + " ";



On server side, you can convert this dropElems to a list by splitting the string. If you use PHP, the function is explode(' ', $dropElems);
```
Markus November 27, 2007 10:43 pm

Thanks for a great tutorial, it helped me out quite a bit. Still have two questions though ;(
I am embedding YUI 2.3.1 and the iframe example does not show. Any changes there? Is there a way to manipulate the destination of the iframe with a "dialog4.define(url)" function? Any help or pointers would be awesome. Thanks again, and in advance.
Markus November 27, 2007 10:59 pm

Sorry, forgot to add the code that I am trying to run. Neither this, nor the copy of dialog4 from the demo work. Thoughts ?

YAHOO.test.container.dialog3=new YAHOO.widget.Dialog("test3",{width:"700px",fixedcenter:true,visible:false,close:true,draggable:false,modal:true,postmethod:'form',constraintoviewport:true});
YAHOO.test.container.dialog3.render();

YAHOO.test.container.dialog3.init=function(opt){
YAHOO.test.container.dialog3.setHeader(opt);
}
YAHOO.test.container.dialog3.reset=function(){
YAHOO.test.container.dialog3.setHeader('Error');
}
var onDialog3Show = function(e, args, o, opt, tgt){
var frame = document.createElement('iframe'); frame.src = "/page.php?opt="+opt+"&id="+tgt;
frame.id='iframe1';frame.name='iframe1';frame.width="700";frame.height="300";
frame.scrolling="no";frame.frameborder="0";frame.border="0";
o.setBody(frame);
};
YAHOO.test.container.dialog3.showEvent.subscribe(onDialog3Show, YAHOO.test.container.dialog3, opt, tgt);

Cuong November 28, 2007 12:22 pm

When adding new method to dialog itself, make sure that you are not override the original method. I believe init is one of the Dialog's internal method.

In addition, the signature of subscribe should be @void subscribe ( fn , obj , override )@, the extra parameter you specified will be ignored.

If you want to pass extra parameter to the handler, use second the second parameter, such as:
<pre>
YAHOO.test.container.dialog3.showEvent.subscribe(onDialog3Show, {self: YAHOO.test.container.dialog3, opt: opt, tgt: tgt});





and in your handler:

<pre>

var onDialog3Show = function(e, a, o){

var frame = document.createElement('iframe'); frame.src = "/page.php?opt="+o.opt+"&id="+o.tgt;

frame.id='iframe1';frame.name='iframe1';frame.width="700";frame.height="300";

frame.scrolling="no";frame.frameborder="0";frame.border="0";

o.self.setBody(frame);

};





"More about YUI callbacks":http://thecodecentral.com/2007/11/23/a-compilation-of-yui-callback



Is there a way to manipulate the destination of the iframe with a "dialog4.define(url)" function?




It should be possible by create an IFRAME and insert it into the dialog body:

<pre>

var iframe = document.createElement(iframe);

//save this reference

dialog4.iframe = iframe;

dialog4.setBody(iframe);

//to manipulate destination

dialog4.iframe.src = "blabla";





I haven't tested it, but you got the idea.

Markus November 28, 2007 9:06 pm

Thank you for the quick reply!
I will check it out tomorrow when I get back to work ;)

Thanks again for the help!
Sachverstndiger February 17, 2008 1:42 pm

<strong>Sachverstndiger...</strong>

Your blog is really very informative....
Google Watch blog February 17, 2008 2:01 pm

<strong>Immobiliensachverständige...</strong>

Google will update a new seo form...
YUI Based Lightbox - Final : Code Central February 21, 2008 9:31 pm

[...] YUI Lightbox for content [...]
Markus March 5, 2008 10:32 pm

thanks for the tutorial.. i already bookmark this page
Lamar April 12, 2008 7:43 pm

my cmment is i want a id code for my email
Lamar April 12, 2008 7:44 pm

My comments is i think i should get a code for my email
22 drag & drop scripts « The Adventures of Amit Dua October 13, 2008 7:39 am

[...] Drag, Drop Lightbox with YUI [...]
faiiaf February 1, 2009 8:37 pm

var onDialog3Show = function(e, args, o){
var frame = document.createElement('iframe');
frame.src = "";
frame.width = "100%";
frame.height = "480";
o.setBody(frame);

<a href="#void" onclick="YAHOO.com.thecodecentral.dialog3.show()"></a>

this make me almost cry, could I pass a parameter to frame.src = ""; from onclick as code above ?

thanks for any idea!

faiiaf
sharma May 14, 2009 4:18 am

how can i call YAHOO.com.thecodecentral.dialog.show() on load of page.
my requiremnt is i want show an transprent layer on page after load the page.
but it show me YAHOO.com.thecodecentral.dialog is null and not an object.
Descibed above example is called on button click but my need is on load of page .Please advise me.
Biz"volunteer abroad India"Mark June 9, 2009 4:50 am

Thank you for providing step by step installation instructions. This makes it easier for me.
pligg.com January 9, 2010 5:02 am

<strong>Creating Lightbox with Yahoo! User Interface Library | Code Central...</strong>

Create a drag and drop light box with the yahoo user interface library....