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.
联系客服