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:
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.
2. Add Overlay Function to Create Lightbox
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.
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.
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.
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.
That's it! Happy lightbox creating!
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
There is so much that you can do with this, so look through the API and examples on the website.
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.
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
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.)
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.