Creating Lightboxes with JQuery Tools Overlay

To provide interactive content without navigating the user to a separate web page, many websites use what are known as 'lightboxes'. A lightbox is a styled 'popup' which sits on top of the web page content using a DIV, as opposed to a separate pop-up window. Lightboxes are useful for showing additional content directly onto the page, without needing to load a new page. For example, many websites use ligthboxes to display full-size photographs, which are activated when the user clicks onto a thumbnail.

The following website contains code and some basic tutorials to get you up and running on creating lightboxes: http://flowplayer.org/tools/overlay/index.html

Note that at the bottom of this site is a list of functions to control the overlay and its display.

So, how do we create a lightbox? Simply follow the steps below to get started:

1.Locate and Reference the JQuery Tool Javascript

Download the minimised script from the website. The script will be named: jquery.tools.min.js

Simply include the path to the script in your code for that page to activate the JQuery Tools Overlay.

<script src="/js/jquery.tools.min.js"></script>

2. Add Overlay Function to Create Lightbox

To activate the lightbox, you will need to include a Javascript function. This function provides the ability to add many configurations and to write your own functions based on the lightbox's events. A few of these will be described breifly in the last section, but if you do want to get ahead, you can view the API available on the JQuery Tools Overlay website. To get something basic up and working, please see the code below.

Note that this code sets configurations for the Mask Element. (The Mask element is the overlay/mask which 'grays out' or disables the website, except for the lightbox.) Not overriding this element will provide the default styling for the mask element.

In short, my example works when a "rel" value is set on an anchor/link <a> tag. You can change this to specify image <IMG> tags or any other HTML tag instead, to activate the lightbox.

$(document).ready(function() {
  $("a[rel]").overlay({
   mask: {zIndex:100,color:'#000000',opacity: 0.7,loadSpeed:'fast'}
  });
});

3. Insert code to launch the lightbox

Next, we need to create the reference to it, which will register the event to activate the lightbox. For the example above, we used the 'rel' value of an <a> tag. For multiple links to different lightboxes, you can change the REL tag from pics1 to pics2, to pics3, and so on.

 <td><a rel="#pics1">[more info]</a></td>

4. Create the lightbox:

Now, we will create our lightbox. You can create and style your own lightbox content. (No need to worry about setting DIVs for the CLOSE button or background or anything, as this can be referenced in CSS.)

The important thing to note here is the ID that you used in the REL tag (see above step); you will want the ID used in the REL tag to be the same as your DIV ID, as below. If you are creating multiple lightboxes, simply change the ID of the main DIV.

 <div id="pics1"><a></a>
     <div>
     <h2>Photos</h2><h3>France</h3><h3>1st Apr 2011</h3>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec  quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla  consequat massa quis enim.</p>
     </div>
 <img src="/images/paris1.jpg">
 </div>

5. Create your lightbox style elements CSS

Now that you have created your ligthbox, you will need to style it to fit your page. An example is below.

 .details h3{display:inline;padding-left:35px;}
.details h2{display:inline;}
.details p{padding:3px;padding-top:15px;}
.simple_overlay img{padding-top:20px;padding-right:15px;}
.simple_overlay {display:none;z-index:20000;background-color:#FFFFFF;width:850px;min-height:200px;-moz-box-shadow:0 0 90px 5px #000;-webkit-box-shadow: 0 0 90px #000;-moz-border-radius: 4px 4px 4px 4px;border:1px solid #666;}
.simple_overlay .close {background:url(images/lightbox/close.png) top right no-repeat;position:absolute;right:-15px;top:-15px;cursor:pointer;height:35px;width:35px;}
.details {position:relative;float:left;font-size:.8em;width:555px;padding:15px;}

That's it! Happy lightbox creating!

Configuring

You can configure elements of the lightbox so that you are not constricted to using the set defaults. A list of the defaults and information can be found on the Overlay website (currently near the bottom of the page): http://flowplayer.org/tools/overlay/index.html

You can even add your own functions to do some crazy stuff! There are four functions that you can complete other Javascript tasks to do. These four are: onBeforeLoad, onLoad, onClose, and onBeforeClose. An example of how these can be used is below, along with setting some configurations to some elements, such as Mask, which we looked at earlier. You could potentially create your own mask elements or other DIVs to show/hide; you can display user messages and do a lot with this.

There is so much that you can do with this, so look through the API and examples on the website.

$(document).ready(function() {
   $("a[rel]").overlay({

      mask: {color:'#000'}, //Mask

      onLoad: function(event) { //onLoad event
      //Do something awesome when the ligthbox loads.
      },

      onClose: function(event) { //onClose event
      // Do something when the ligthbox closes!
      }
   });
});

Issues

When implementing this lightbox solution on a website, I tested in all browsers, and the soluition works fine in all. There was only one area where there was a glitch, related to the Mask element. In IE, the mask element was displayed over the lightbox, even though the z-index of the lightbox was set to a higher z-index. The problem was that the DIVs for the lightbox were in the content area, and the Mask being created was created directly under the BODY tag. There are two ways that this can be solved. One is to change your page structure. The other is to create your own overlay DIV.

Structure:

The easiest way to get this right and to use the code provided in the JQuery Tools Overlay is to simply get your strucure correct so that IE behaves. JQuery Tools Overlay creates the overlay mask underneath the BODY in the DOM. This confused Javascript in the structure that was being used (below), so irregardless of z-index settings, the overlay mask will always be overlayed over the lightbox in IE! What you can do is ensure that the Mask DIV is at the same level as the lightbox panels. (In the example below, simply put the LIGHTBOX PANELS outside the CONTAINER.)

 BODY
    CONTAINER
       LIGHTBOX PANEL 1
       LIGHTBOX PANEL 2
       LIGHTBOX PANEL 3
    OVERLAY MASK

Specify your own Overlay DIV:

In the CMS, create an empty DIV, and give it class name 'exposeMask'. You can style this mask in your CSS.