Lytebox How To Use

看见就非常 2014-09-29

展开全文

How To Use

Step 2: Make sure that you have a DOCTYPE declaration. The DOCTYPE declaration should be the very 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./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./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.