Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as "Slideshow" support, "Themes" support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox.
For examples of the new and improved Lytebox in action, select an image from one of the following display types:
Single Image![]()
Grouped Images
![]()
Slideshow [ Lyteshow feature ]
![]()
LyteFrame [ Show HTML Pages ]
Google Search | TechFlaps | Face Book
How To Use
Step 1: Download Lytebox v3.22
Step 2: Add the following lines to the <head> of your document:
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
Step 3: Add the appropriate rel attribute for the type of display you want. See the examples below.
Single Image Example:
Grouped Images Example:
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>
Slideshow Example [note the use of lyteshow instead of lytebox]:
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>
HTML Content Example [ note the use of lyteframe instead of lytebox ]:
rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>
Note: When using the "Lyteframe" feature, the REV attribute is used to control the width, height, and scrolling of the window. If the REV attribute is omitted, then by default width/height is set to 400px and scrolling is set to auto.
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>
<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="http://www.google.com" rel="lyteframe" title="Search Google"
Posted on Sunday, July 13, 2008 by Binish Mathew
Related Articles by Category
Subscribe to:
Post Comments (Atom)













No Responses yet for this post! Be the first one!
Post a Comment