Using Lytebox With DHTMLMenu

This is an explanation of how to call the Lytebox function using DHTMLMenu. For a demonstration of the function, click "Image" in the menu above to see an image displayed in a lightbox, then click "Google Search" to see an external web page displayed in a lightbox.

Here is how we created the Lytebox demo:

1) We downloaded the Lytebox JavaScript from http://www.dolem.com/lytebox/.

2) We included the Lytebox JavaScript and CSS file in the page header as follows:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

3) When we created the menu, for the menu item that calls the Lightbox function we selected HTML instead of Text and entered the following HTML code for the "Image" item:

<a href="images/gotalife.jpg" rel="lytebox" title="I Got A Life">Image</a>

and the following code for the "Google Search" item:

<a href="http://www.google.com" rel="lyteframe" title="Search Google"
rev="width: 600px; height: 200px; scrolling: no;">Google Search</a>

Note the use of lyteframe instead of lytebox when linking to an HTML document. For a slideshow, use lyteshow.

4) In lytebox.css we created a container for the DHTMLMenu and specified black text no text decoration (no underline) for the container.

If you are a Dreamweaver user, check out Advanced Layer Popup, a commercial extension available from DMX Zone.