Lightbox with the help of YUI2

By Brian Moon

This is a lightbox that is created with the help of YUI2. It purposely does not use YUI's Panel. Panel is nice sometimes, but it comes with some baggage I find annoying. Likewise, I don't always use YUI for every possible interaction, such as setting styles. All my target browsers support the same syntax for that action. The one exception is opacity which is not the same across browsers. Basically, I use YUI to make dealing with the hard parts of javascript easier. Nothing more, nothing less.

Features

Lightbox and contents can be created via:
- Javascript
- Existing markup
- Asynchronus (AJAX) request (contents only)
Lightbox will close when ESC is pressed
Rounded corners and box shadow using CSS3.

Compatibility

Firefox 3.5+
Chrome 4+
Safari 5+
Internet Explorer 9 (Animation is not working due to YUI's lack of opacity support in IE9)
Internet Explorer 8 (Via IE9 in IE8 compatibility mode. No rounded corners, no shadows)
Internet Explorer 7 (Via IE9 in IE7 compatibility mode. No rounded corners, no shadows)
Opera 10.53

Files

lightbox.js - The Lightbox object.
lightbox.css - The core CSS need for layout.
lightbox-ui.css - The styles used to make it all pretty.

Optionally you can use the DN object for its selector function. If you don't want to use it, you can replace the DN.selector calls in Lightbox with YAHOO.util.Selector.query and rename DN.Lightbox to just Lightbox.

YUI Requirements

Dom
Event
Connection Core
JSON
Selector
Animation (if animate set to tru)

Examples

Creating it all in javascript

You can pass in the contents of the lighbox when creating it.

var lb1 = new DN.Lightbox( { contentString: '<h1>This is dynamic content from javascript</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nibh sit amet lectus blandit egestas. Integer ac rutrum erat. Donec nec auctor risus. Ut dapibus eleifend turpis, ut adipiscing ligula tempor eu. Ut volutpat nisl non sem mollis feugiat. Praesent ornare lobortis erat, in imperdiet metus congue et. Cras orci massa, venenatis rhoncus convallis eu, ultricies nec velit. Aenean in libero vitae odio auctor ullamcorper. Suspendisse vestibulum pretium mi eget tempus. Nam vitae lacus massa, vel dictum lacus. Nulla quam odio, tempor a rhoncus eget, consectetur ac ante. Vivamus a turpis eu velit mollis eleifend. Fusce a odio ac turpis gravida fringilla. Aliquam vestibulum, neque in venenatis dictum, massa turpis gravida sem, pellentesque auctor sapien felis ut leo. Phasellus ac urna non risus fermentum aliquet pharetra sed nibh.', animate: true, maxWidth: 500 } ); YAHOO.util.Event.addListener("showMe1", "click", lb1.show, lb1, true);

Using existing markup

You can set contentElement to an existing element name to use existing markup for the lightbox. Here we use existing markup with the lb-bx-dk class set on the inner box so that it has a black background suitable for showing an image.

<div id="imgLB" class="dn-lightbox"> <div class="lb-bg"></div> <div class="lb-bx lb-bx-dk"> <a class="lb-close" href="#"><span class="txt">Close</span></a> <div class="lb-bd" style="font-size: small; text-align: center;"> <h4>This is existing markup</h4> <a href="http://www.flickr.com/photos/loush555/2829474635/in/photostream/"><img border=0 src="http://farm4.static.flickr.com/3249/2829474635_fd4ae879e8.jpg"><br>http://www.flickr.com/photos/loush555/2829474635/in/photostream/</a> </div> </div> </div> <script> var lb2 = new DN.Lightbox( { contentElement: 'imgLB', animate: true } ); YAHOO.util.Event.addListener("showMe2", "click", lb2.show, lb2, true); </script>

Using existing markup, light background

This is the same as the above, but we set a class to make the background light instead of dark.

<div id="imgLB2" class="dn-lightbox"> <div class="lb-bg lb-bg-lt"></div> <div class="lb-bx lb-bx-dk"> <a class="lb-close" href="#"><span class="txt">Close</span></a> <div class="lb-bd" style="font-size: small; text-align: center;"> <h4>This is existing markup</h4> <a href="http://www.flickr.com/photos/loush555/2829474635/in/photostream/"><img border=0 src="http://farm4.static.flickr.com/3249/2829474635_fd4ae879e8.jpg"><br>http://www.flickr.com/photos/loush555/2829474635/in/photostream/</a> </div> </div> </div> <script> var lb3 = new DN.Lightbox( { contentElement: 'imgLB2', animate: true } ); YAHOO.util.Event.addListener("showMe3", "click", lb3.show, lb3, true); </script>

Dynamically create a lightbox with contents from an asynchronus (AJAX) request.

Here we set contentURL in the lightbox config. When shown, the URL will be used to fetch the lightbox contents.

var lb4 = new DN.Lightbox( { contentURL: "http://brian.moonspot.net/lightbox/async.php", animate: true, maxWidth: 500 } ); YAHOO.util.Event.addListener("showMe4", "click", lb4.show, lb4, true);

This shows how you can use a custom listener to set the contentURL before calling the show() method.

YAHOO.util.Event.addListener(DN.selector("button", "showMe5Set"), "click", function(e){ target = Y.Event.getTarget(e); if(target.id == "showMe5-1"){ mode = "1"; } else if(target.id == "showMe5-2"){ mode = "2"; } else { return; } lb5.cfg.contentURL = "http://brian.moonspot.net/lightbox/async.php?mode=" + mode; lb5.show(e); }, lb5, true);

Visit my blog.