How To Use

Step 1: Download Lytebox

Step 2: Make sure that you have a DOCTYPE declaration. The DOCTYPE declaration should be thevery first thing in an HTML document, before the <html> tag. I recommend using the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Step 3: Add the following lines to the <head> section of your HTML document:

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

Step 4: Activate Lytebox content by using class="lytebox". See the examples below.

Single Image Example:

<a href="images/image-1.jpg" class="lytebox" data-title="My Title">Image #1</a>

Grouped Images Example:

<a href="images/image-1.jpg" class="lytebox"   data-lyte-options="group:vacation" data-title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg" class="lytebox"    data-lyte-options="group:vacation" data-title="My Sister">My Sister</a>

Slideshow Example:

<a href="images/image-1.jpg" class="lytebox"    data-lyte-options="slide:true group:vacation" data-title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg" class="lytebox"    data-lyte-options="slide:true group:vacation" data-title="My Sister">My Sister</a>

HTML Content and Embedded Media:

<a href="http://www.google.com" class="lytebox" data-title="Search Google"    data-lyte-options="width:400 height:300 scrollbars:no">Google Search</a>        <a href="catalog1.htm" class="lytebox"    data-lyte-options="group:catalogs" data-title="Summer Catalog">Summer Catalog</a><a href="catalog1.htm" class="lytebox"    data-lyte-options="group:catalogs" data-title="Winter Catalog">Winter Catalog</a>        <a href="brochure.pdf" class="lytebox" data-title="My PDF Brochure">My PDF Brochure</a>        <a href="http://www.youtube.com/embed/ajNC3W-Dlqk"    class="lytebox" data-lyte-options="width:560 height:349">YouTube</a>

Tooltip Examples: (class="lytetip")

<a href="javascript:void(0)" class="lytetip" data-tip="This is a classic tooltip">hover</a>        <a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:info"    data-tip="Here's some info.">hover</a>        <a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:help"    data-tip="<em>Title</em>Some helpful stuff.">hover</a>        <a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:warning"    data-tip="<em>Warning Title</em>My warning message.">hover</a>        <a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:error"    data-tip="<em>ERROR</em>My error message.">hover</a>

Event Callback Examples:

<a href="img.jpg" class="lytebox" data-title="Some title"   data-lyte-options="beforeStart:myFunctionName">Call myFunctionName() before start</a>        <a href="img.jpg" class="lytebox"   data-lyte-options="beforeEnd:myFunctionName">Call myFunctionName() before end</a>

Note: When using the "Lyteframe" feature, the data-lyte-options attribute is used to control the width, height, and scrollbars of the window. If the data-lyte-options attribute is omitted, then by default the style applied is width:80% height:80% scrollbars:auto.

When using the "Lytetip" feature, the data-lyte-options attribute is used to specify the type of tooltip. The options are classic (default), info, help, warning, and error (e.g. data-lyte-options="tipStyle:error"). If omitted then the default type is classic.

Documentation: For a complete list of configurable Lytebox options, as well as how to use the library functions, CLICK HERE.
iFrames: If you plan to use Lytebox in an iframe environment, meaning that you will launch the viewer from within an iframe, then you need to be sure that both lytebox.js and lytebox.css are included in the parent document, while including lytebox.js (only) in the iframe document.
Source Code: The JavaScript file (lytebox.js) that is included in the download has been stripped down (comments removed) for optimization purposes. The commented source code is available HERE. Older versions of Lytebox can be found HERE.
HELP! Having problems with Lytebox? Visit the Lytebox Message Boards and find your answer or report a problem.

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。