Creating Lightbox with Yahoo! User Interface Library

Download YUI 2.3.0
Run Online demo

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.

Include YUI to Your Page

  1. You will need to download Yahoo! User Interface Library.
  2. 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.

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.

Put Everything Together

Remarks:

  1. 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.
  2. 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.
  3. 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

20 Comments Creating Lightbox with Yahoo! User Interface Library

  1. Pingback: YUI Based Lightbox - Revisit : Code Central

  2. Pingback: Ajax Girl » Blog Archive » YUI gets a sharp-looking lightbox

  3. Pingback:   ??YUI?Lightbox by The Third Part

  4. willunion

    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,

  5. Cuong

    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.

    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);

  6. Markus

    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.

  7. Markus

    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);

  8. Cuong

    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:

    and in your handler:

    More about YUI callbacks

    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:

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

  9. Markus

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

    Thanks again for the help!

  10. Pingback: Sachverstndiger

  11. Pingback: Google Watch blog

  12. Pingback: YUI Based Lightbox - Final : Code Central

  13. Pingback: 22 drag & drop scripts « The Adventures of Amit Dua

  14. faiiaf

    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()">

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

    thanks for any idea!

    faiiaf

  15. sharma

    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.

  16. Pingback: pligg.com

Comments are closed.