Lytebox, by Markus Hay, is another type of veiled window display system. It is based on the Lightbox system but has been rewritten to remove the file dependencies of the numerous external script files. This reduces the overall file size requirements by about 60%, saving quite a lot of page load time. Lytebox also extends the capabilities of the original by providing support for HTML pages and slideshows, and works from within i-frames.

(lytebox v3.22mod)

Note: The zip file presented here contains the script modified by Terry Nederveld so it will work in IE8.

In the zip file, you will find two files (lytebox.js and lytebox.css) and an /images folder. The script and CSS file need to be uploaded to your site. The /images folder contains several image files needed during execution of the script, but you do not need all the images uploaded to your site. The blank.gif and loading.gif files will always be needed. There are also several files grouped in various color themes: grey, blue, gold, green, and red. The default color theme is grey, so if you do not make modifications to the script file, you need to upload the grey set of images. If you do modify the script file to change the color theme, you will need to upload the associated set of images. You could upload the entire /images folder; the unused files will just consume some disk space and will not effect execution of the script.

The images are expected to be found inside a directory named /images which is located in the same directory as the lytebox.css file so be sure it is placed in the correct location. If your images are missing when the script executes, then the most likely problem is the /images directory is in the wrong place.

To use lytebox, you need to add the following to the page’s custom header:

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

Lytebox is triggered by a link. The link can be either a text or image link and the type of lytebox window is determined by the rel attribute you use, which is entered in the link’s Code field. You can choose between displaying a single image, group of images, single HTML page, group of HTML pages, or an image slideshow. Examples of these can be seen in the demo.

Images – Single and Grouped

To display an image in a lytebox window, be sure your URL field links to the desired image and in the Code field, enter:

rel="lytebox"

Multiple images can be grouped together by using the grouping format of the rel attribute; i.e.,

rel="lytebox[my-group]"

where my-group is any name you want to use. Every image associated with that group must use the same group name. When grouped images are displayed, previous and next labels are used to allow the visitor to manually navigate between the images. You may have multiple sets of grouped images by using different group names for each set.

Any text placed inside the title field of a link will be used as a caption in the lytebox window.

Image Slideshow

A lytebox slideshow is put together much like a set of grouped images; each linked image must be assigned to the same group name. To distinguish the slideshow from a group of images, a different type of rel attribute is used:

rel="lyteshow[my-group]"

where my-group is the name used to group all the images together. The slideshow delay between image changes is set to 10 seconds, but this can be modified by altering a configuration variable in the script. Your visitor also can manually navigate backwards and forwards using the controls available as in a grouped image set.

HTML – Single and Grouped

HTML page content can also be displayed inside a lytebox window. The rel attribute, while similar, uses a different key word:

rel="lyteframe"

The lytebox script uses the following default settings for its window when displaying HTML content:

To change the default settings, you must use the rev attribute to pass the your desired changes. The rev attribute is formatted as:

rev="width:400px; height:300px; scrolling:no;"

Alter the width and height values as needed, but remember to include the size units. The scrolling parameter accepts either auto, yes, or no.

The link’s title field can also be used to place a caption on the lytebox window displaying the HTML content.

Multiple HTML pages may be grouped into a single lytebox window allowing your visitor to navigate between them just like grouped images. A common group name included as part of the rel attribute ties the HTML pages together; e.g.,

rel="lyteframe[my-pages]"

Using with I-frames

If you want to display a lytebox window from a link contained on a page being shown in an i-frame, you must take special steps. On the parent page (the page holding the i-frame), you must include the link reference to include the lytebox.css file in the custom header. Then on the page to be displayed in the i-frame, you must include the reference to include the lytebox,js file in its custom header. The lytebox window will always open up over the parent page, not the i-frame page.

Script Modifications

There are several parameters of the script that you can modify such as the slideshow time interval, opacity of the background, color theme, if controls should be displayed, and many more. All these parameters and their values are outlined at the start of the script, along with descriptions of their use. If you plan to make modifications, you will need to use a plain text editor to make the changes before you upload it to your site. Changes cannot be performed dynamically, so once you change the script and upload it, the changes will effect every instance the script is used.