Latest Version: Lytebox v5.5
Initial Launch Date: 11/13/2006
Latest Release Date: 01/26/2012 (Release History)

Home | Message Boards | Contact Me

Overview
How To Use
Documentation
Browser Compatibility
License

Documentation

Overview

Lytebox can be configured by editing the main JavaScript file (lytebox.js), or by using the data-lyte-options attribute to set individual options on a per link/viewer basis. Use the left-hand navigation to see all the various options and configurations that can be set.

If you'd like Lytebox to look and function a certain way throughout your website, then you'll want to configure the lytebox.js file. CLICK HERE to see a detailed description of the options that are availalbe in the JS file.

The legend below describes the color schemes and syntax used in each documentation section and what they represent.

Red denotes the configurable option name.
Green denotes the default value.
Blue denotes supported Lytebox version.
name:value pairs are used to set options and must NOT contain spaces. The only time you should use a space is to separate one name:value pair from another.
The "|" characters represents "or", in other words, true|false means that the value should be either true or false.

Content Descriptors

This section discusses how to set the title and/or description for the Lytebox viewer. The title can be shown either above or below the Lytebox content, whereas the description (as of this writing) is restricted to only being displayed below the viewers content.

data-title and title

Version: 5.0+

These attributes should be used to set the title for the content to be displayed in the viewer. Note that older versions of Lytebox (before v5.0) pulled the title exclusively from the "title" attribute. If both attributes are specified, then data-title value will take precedence. If you want your pages to validate then you should use the "title" attribute exclusively.

Demonstration: Jupiter / Io

Code Examples:

<a href="img.jpg" class="lytebox" data-title="My Title">Link</a>

<a href="img.jpg" class="lytebox" title="My Title">Link</a>

data-description

Version: 5.0+

This attribute should be used to display a more detailed description of the content. The description will appear below the viewer regardless of the position of the title. Note that you can use HTML to style the description, but excersize caution as invalid markup can break the display.

Demonstration: Jupiter / Io

Code Examples:

<a href="img.jpg" class="lytebox" data-title="My Title"
   data-description="This is a description with some <b>BOLD<b> text.">Link</a>

Language Setup

this.label

Version: 5.0+

You can customize Lytebox so that your native language is used when users hover over the buttons on the viewer. In future releases I will be adding pre-defined language files so that you can simply specify a two-character language code, but for the time being you can change the default language (English) by opening up lytebox.js and modifying the following labels to suite your needs:

this.label['close']     = 'Close (Esc)';
this.label['prev']      = 'Previous (\u2190)';  // Previous (left arrow)
this.label['next']      = 'Next (\u2192)';      // Next (right arrow)
this.label['play']      = 'Play (spacebar)';
this.label['pause']     = 'Pause (spacebar)';
this.label['print']     = 'Print';
this.label['image']     = 'Image %1 of %2'; // %1 = active image, %2 = total images
this.label['page']      = 'Page %1 of %2';  // %1 = active page, %2 = total pages

Global Viewer Options

The following options can be set in lytebox.js to control the global look and feel of the Lytebox viewer, or they can be overriden on a per link basis using the data-lyte-options attribute as shown in the examples. The values in green are the defaults that are used out of the box (in lytebox.js). Please play particular attention to the version number supported for each option. If the version of Lytebox that you are using has an option that isn't shown below, then chances are it is no longer supported.

IMPORTANT: If you wish to keep your pages validated, then use the the REV attribute instead of the data-lyte-options attribute to customize the look and feel of the viewer. The syntax is the same.

inherit:true|false

Version: 5.2+

Controls whether or not options are inherited from the first link in a grouped set. If set to false and no options are specified, the global option (defined in lytebox.js) will be used instead. Otherwise, link specific overrides can be accomplished by setting inheret to false. In the example below, the print button will be shown in the 1st link of the grouped set, but since inheritance is disabled in the 2nd link, the print button will not be shown.

Code Examples:

<a href="img1.jpg" class="lytebox" 
   data-lyte-options="group:name showPrint:true">Link</a>
   
<a href="img2.jpg" class="lytebox" 
   data-lyte-options="group:name inherit:false">Link</a>

<a href="img1.jpg" class="lytebox" rev="group:name showPrint:true">Link</a>
<a href="img2.jpg" class="lytebox" rev="group:name inherit:false">Link</a>

hideObjects:true|false

Version: 4.0+

Controls whether or not embedded objects (such as Flash, Java, etc.) should be hidden when the viewer opens. Note that previous versions of Lytebox used hideFlash to hide only Flash content. This option was replaced by hideObjects as of v4.0 and is no longer supported.

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="hideObjects:false">Link</a>

<a href="img.jpg" class="lytebox" rev="hideObjects:false">Link</a>

autoResize:true|false

Version: 3.1+

Controls whether or not images should be resized if larger than the browser window dimensions.

Demonstration: autoResize:true | autoResize:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="autoResize:false">Link</a>

<a href="img.jpg" class="lytebox" rev="autoResize:false">Link</a>

doAnimations:true|false

Version: 3.2+

Controls ALL animation effects for the Lytebox viewer, i.e. overlay fade in/out, image resize transition, etc.

Demonstration: doAnimations:true | doAnimations:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="doAnimations:false">Link</a>

<a href="img.jpg" class="lytebox" rev="doAnimations:false">Link</a>

animateOverlay:true|false

Version: 5.2+

Controls ONLY the overlay (background darkening) effects, and whether or not to fade in/out. Note that doAnimations takes precendence over animateOverlay, meaning that if you set this to true (default) and doAnimations to false, then no overlay animation will occur. This is set to false by default because the overlay tends to hurt overall performance of the viewer.

Demonstration: animateOverlay:true | animateOverlay:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="animateOverlay:false">Link</a>

<a href="img.jpg" class="lytebox" rev="animateOverlay:false">Link</a>

forceCloseClick:true|false

Version: 4.2+

If true, users are forced to click on the button to close the Lytebox viewer, otherwise clicking anywhere outside the viewer will close Lytebox (including the close button, of course).

Demonstration: forceCloseClick:true | forceCloseClick:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="forceCloseClick:true">Link</a>

<a href="img.jpg" class="lytebox" rev="forceCloseClick:true">Link</a>

refreshPage:true|false

Version: 4.0+

If true, the web page will refresh when Lytebox is closed.

Demonstration: refreshPage:true | refreshPage:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="refreshPage:true">Link</a>

<a href="img.jpg" class="lytebox" rev="refreshPage:true">Link</a>

showPrint:true|false

Version: 4.0+

If true, the print button () will appear which allows users to print the contents of the viewer.

Demonstration: showPrint:true | showPrint:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="showPrint:true">Link</a>

<a href="img.jpg" class="lytebox" rev="showPrint:true">Link</a>

navType:1|2|3

Version: 3.0+

This controls the viewers navigation. The following options are available:

1 = and buttons are shown near the top when hovering on the left/right side

2 = and buttons are shown in the navigation pane (next to close button)

3 = navType_1 + navType_2 (show both)

Note that navType = 3 is only available from Lytebox v4.0 and greater. Also note that prior to version 5.0 setting navType = 2 generated "« prev | next »" links next to image/page x of x. This form of navigation is no longer supported as buttons are now used exclusively to promote better mobile/multi-language support.

Demonstration: navType:1 | navType:2 | navType:3

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="group:name navType:2">Link</a>

<a href="img.jpg" class="lytebox" rev="group:name navType:2">Link</a>

navTop:true|false

Version: 5.0+

If true, positions the navigation/buttons on the top right area of the viewer. By default these are positioned on the bottom right.

Demonstration: navTop:true | navTop:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="navTop:true">Link</a>

<a href="img.jpg" class="lytebox" rev="navTop:true">Link</a>

titleTop:true|false

Version: 5.0+

If true, positions the title and image/page counter top left area of the viewer. By default these are positioned on the bottom left.

Demonstration: titleTop:true | titleTop:false

Code Examples:

<a href="img.jpg" class="lytebox" data-lyte-options="titleTop:true">Link</a>

<a href="img.jpg" class="lytebox" rev="titleTop:true">Link</a>

HTML Content / Media Options (aka Lyteframe)

scrolling:auto|yes|no

Version: 3.20 - 3.25, 5.2+

Controls whether or not scrollbars are visible when viewing HTML content. Be advised that if scrollbars are disabled then content can become truncated if you don't properly size the viewer.

NOTE: Due to a screw up on my part, this option was removed from Lytebox versions 4.0, 5.0, and 5.1 in favor of scrollbars (below). It was added back in as of v5.2 so that you may use either option going forward.

Demonstration: scrolling:auto | scrolling:yes | scrolling:no

Code Examples:

<a href="blah.htm" class="lytebox" data-lyte-options="scrolling:no">Link</a>

<a href="blah.htm" class="lytebox" rev="scrolling:no">Link</a>

scrollbars:auto|yes|no

Version: 4.0+

Controls whether or not scrollbars are visible when viewing HTML content. Be advised that if scrollbars are disabled then content can become truncated if you don't properly size the viewer. Note that this option does the same thing as the scrolling option above, so you may use either or.

Demonstration: scrollbars:auto | scrollbars:yes | scrollbars:no

Code Examples:

<a href="blah.htm" class="lytebox" data-lyte-options="scrollbars:no">Link</a>

<a href="blah.htm" class="lytebox" rev="scrollbars:no">Link</a>

width:80%

Version: 3.2+

Sets the width of the viewer, using either pixels (px) or percentage of page (%). Note that if "px" is omitted, then pixels are still assumed. Also note that if you specify 100%, then the viewer itself still has left/right margins.

NOTE: Support for specifying "%" instead of strictly "px" was introduced in v4.0. Prior versions of Lytebox support only "px" for the width.

Demonstration: width:90% height:200 | width:600px height:70%

Code Examples:

<a href="blah.htm" class="lytebox" data-lyte-options="width:500 height:60%">Link</a>

<a href="blah.htm" class="lytebox" rev="width:500px height:60%">Link</a>

height:80%

Version: 3.2+

Sets the height of the viewer, using either pixels (px) or percentage of page (%). Note that if "px" is omitted, then pixels are still assumed. Also note that if you specify 100%, then the viewer itself still has top/bottom margins.

NOTE: Support for specifying "%" instead of strictly "px" was introduced in v4.0. Prior versions of Lytebox support only "px" for the height.

Demonstration: height:90% width:600 | height:200px width:30%

Code Examples:

<a href="blah.htm" class="lytebox" data-lyte-options="height:400 width:200">Link</a>

<a href="blah.htm" class="lytebox" rev="height:400px width:200px">Link</a>

loopPlayback:true|false

Version: 5.0+

Controls whether or not embedded media files are looped (swf, avi, mov, mpg, etc.).

Demonstration: loopPlayback:true | loopPlayback:false

Code Examples:

<a href="test.avi" class="lytebox" data-lyte-options="loopPlayback:true">Link</a>

<a href="test.avi" class="lytebox" rev="loopPlayback:true">Link</a>

autoPlay:true|false

Version: 5.0+

Controls whether or not playback is automatically started for embedded media files (swf, avi, mov, mpg, etc.).

Demonstration: autoPlay:true | autoPlay:false

Code Examples:

<a href="test.avi" class="lytebox" data-lyte-options="loopPlayback:true">Link</a>

<a href="test.avi" class="lytebox" rev="loopPlayback:true">Link</a>

autoEmbed:true|false

Version: 5.2+

Controls whether or not Lytebox will embed media in an object tag. If this is turned off, then the media file (swf, avi, mov, mpg, etc.) will attempt to load directly in the iframe, and in some cases this may launch an external media player depending on which browser you are using. Turning this off also means the alternate "download plugin" page will not be displayed if the users browser does not have the appropriate plugin. This typically results in a "Download / Open With" dialog box.

Demonstration: autoEmbed:true | autoEmbed:false

Code Examples:

<a href="test.avi" class="lytebox" data-lyte-options="autoEmbed:false">Link</a>

<a href="test.avi" class="lytebox" rev="autoEmbed:false">Link</a>

Slideshow Options (aka Lyteshow)

slideInterval:4000

Version: 3.0+

Controls the delay between slides, in milliseconds. For example, setting this to 4500 milliseconds will delay the slide by 4.5 seconds until the next slide appears.

Demonstration: slideInterval:1000 | slideInterval:4500

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name slideInterval:4500">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name slideInterval:4500">Link</a>

showNavigation:true|false

Version: 3.0+

If true, displays the and buttons during the slideshow. This allows the user to bypass the delay and move on to the next (or previous) slide.

Demonstration: showNavigation:true | showNavigation:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name showNavigation:true">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name showNavigation:true">Link</a>

showClose:true|false

Version: 4.0+

Controls whether or not the button is displayed, which might be useful if you want the user to see the entire slideshow which is also set to autoEnd:true. Note that you probably also want to set forceCloseClick:true so that the viewer is not closable via user interaction.

Demonstration: showClose:false | showClose:true

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name showClose:false">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name showClose:false">Link</a>

showDetails:true|false

Version: 3.0+

Controls whether or not to display image details (caption, count).

Demonstration: showDetails:true | showDetails:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name showDetails:false">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name showDetails:false">Link</a>

showPlayPause:true|false

Version: 3.0+

Controls whether or not to display the / buttons that allow the user to control the flow of the slideshow.

Demonstration: showPlayPause:true | showPlayPause:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name showPlayPause:false">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name showPlayPause:false">Link</a>

autoEnd:true|false

Version: 3.0+

Controls whether or not to automatically close the viewer after the last slide is reached. Setting this to false will force the user to click the button to exit the slideshow.

Demonstration: autoEnd:true | autoEnd:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name autoEnd:true">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name autoEnd:true">Link</a>

pauseOnNextClick:true|false

Version: 3.0+

Controls whether or not to pause the viewer when the button is clicked. By default this is set to false as it's assumed the user is just wanting to move onto the next slide without pause. Note that this only applies if showNavigation:true.

Demonstration: pauseOnNextClick:true | pauseOnNextClick:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name pauseOnNextClick:true">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name pauseOnNextClick:true">Link</a>

pauseOnPrevClick:true|false

Version: 3.0+

Controls whether or not to pause the viewer when the button is clicked. By default this is set to true as it's assumed that the user wants to spend more time on the previous slide. Note that this only applies if showNavigation:true.

Demonstration: pauseOnPrevClick:true | pauseOnPrevClick:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name pauseOnPrevClick:false">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name pauseOnPrevClick:false">Link</a>

loopSlideshow:true|false

Version: 4.0+

Controls whether or not to continuously loop the slideshow. If this is set to true, the user will have to manually end the slideshow by clicking the button.

Demonstration: loopSlideshow:true | loopSlideshow:false

Code Examples:

<a href="img.jpg" class="lytebox" 
   data-lyte-options="slide:true group:name loopSlideshow:true">Link</a>

<a href="img.jpg" class="lytebox" 
   rev="slide:true group:name loopSlideshow:true">Link</a>

Event Callbacks

Event callbacks are useful if you wish to perform some sort of action before starting or ending the Lytebox viewer. Note that you can prevent viewer from opening by returning false in the callback assigned to beforeStart, and prevent the viewer from closing if returning false in the callback assigned to beforeEnd. If your callback function does not have a return value, false is assumed.

beforeStart:yourFunction

Version: 4.0+

Javascript function to call before the viewer starts.

Demonstration: beforeStart:myBeforeStart

Code Examples:

<script type="text/javascript">
    function myFunction() {
        alert('myFunction() called\n\nIf the return value is false, the viewer will 
               not open!\n\nYou might consider using this to track clicks or to 
               take some sort of other action before the viewer starts.');
        return true;
    }
</script>

<a href="img.jpg" class="lytebox" data-lyte-options="beforeStart:myFunction">Link</a>

<a href="img.jpg" class="lytebox" rev="beforeStart:myFunction">Link</a>

afterStart:yourFunction

Version: 4.0+

Javascript function to call after the viewer starts.

Demonstration: afterStart:myAfterStart

Code Examples:

<script type="text/javascript">
    function myFunction() {
        alert('myFunction() called.');
        return true;
    }
</script>

<a href="img.jpg" class="lytebox" data-lyte-options="afterStart:myFunction">Link</a>

<a href="img.jpg" class="lytebox" rev="afterStart:myFunction">Link</a>

beforeEnd:yourFunction

Version: 4.0+

Javascript function to call before the viewer ends (after close click).

Demonstration: beforeEnd:myBeforeEnd

Code Examples:

<script type="text/javascript">
    function myFunction() {
        alert('myFunction() called\n\nIf the return value is false, the viewer will 
               not close!\n\nYou might consider using this to force the user to 
               take some sort of action before the viewer exits, like filling 
               out a form field.');
        return true;
    }
</script>

<a href="img.jpg" class="lytebox" data-lyte-options="beforeEnd:myFunction">Link</a>

<a href="img.jpg" class="lytebox" rev="beforeEnd:myFunction">Link</a>

afterEnd:yourFunction

Version: 4.0+

Javascript function to call after the viewer ends.

Demonstration: afterEnd:myAfterEnd

Code Examples:

<script type="text/javascript">
    function myFunction() {
        alert('myFunction() called.');
        return true;
    }
</script>

<a href="img.jpg" class="lytebox" data-lyte-options="afterEnd:myFunction">Link</a>

<a href="img.jpg" class="lytebox" rev="afterEnd:myFunction">Link</a>

args:yourArgument

Version: 5.3+

Argument(s) to be passed into the callback function that you specify.

Demonstration: afterEnd:myAfterEnd args:1,two

Code Examples:

<script type="text/javascript">
    function myFunction(args) {
        // Take our incoming comma-delimited arguments and split them into an array
        var args = args.split(',');
        
        alert(args[0]); // will output 1
        alert(args[1]); // will output two
        
        return true;
    }
</script>

<a href="img.jpg" class="lytebox" 
   data-lyte-options="afterEnd:myFunction args:1,two">Link</a>

<a href="img.jpg" class="lytebox" rev="afterEnd:myFunction args:1,two">Link</a>

Tooltip Text (aka Lytetip)

This section discusses how you can utilize the Lytebox library to display tooltip text. This feature became available starting with Lytebox v4.0. Note that there are two different methods for setting tooltip text, or attributes rather: data-tip and title. The difference between the two is that the data-tip attribute is supported in the HTML5 standard, whereas the title attribute can be used for those who wish to keep their pages validated using the HTML4 standard. Using the data-tip attribute will in no way break your page layout, but W3C validators will complain because it's not considered a valid attribute.

class="lytetip"

Version: 4.0+

Tooltips are enabled using the class modifier "lytetip", as opposed to "lytebox" which is used for the content viewer. You may safely use both class modifiers (showing a tooltip on a Lytebox activate link), as shown in below sections.

data-tip

Version: 5.0+

This attribute should be used exclusively with Lytetip so that the tooltip text can be distinguished from the Lytebox viewers title text. For example, you might use the Lytetip feature on a Lytebox activated link and want your content to be different from what is specified in data-title, and this is where this attribute comes in handy.

Demonstration: Jupiter / Io

Code Examples:

<a href="img.jpg" class="lytebox lytetip" data-lyte-options="tipStyle:info"
   data-description="This is a description of the content with some <b>BOLD<b> text."
   data-title="My Title" data-tip="This is my tooltip text!">Link</a>

title

Version: 4.0, 5.2+

This attribute should be used by those wishing to keep their web pages validated (HTML4). If both the title and data-tip attributes are present in a link, the data-tip attribute takes precedence.

NOTE: Support for the "title" was mistakingly removed in v5.0 and v5.1, but it was re-added in v5.2 for users who wish to keep their pages validated.

Demonstration: Jupiter / Io

Code Examples:

<a href="img.jpg" class="lytebox lytetip" rev="tipStyle:info"
   title="This will appear in the tooltip and viewer title...">Link</a>

Tooltip Options

This section discusses how to set the various options that control the look and feel of tooltips.

IMPORTANT: If you wish to keep your pages validated, then use the the rev attribute instead of the
data-lyte-options attribute. The syntax is the same.

tipStyle:classic|info|help|warning|error

Version: 4.0+

Use this option to set the tooltip style. The default style (if none is specified) is the "classic" tooltip. All 5 options are demonstrated below (hover over links):

tipStyle:classic | tipStyle:help | tipStyle:info | tipStyle:warning | tipStyle:error

Note that you can also set tooltips for an image (or any other element) as you would a link, as demontrated below:

Code Examples:

<a href="javascript:void(0);" class="lytetip" 
   data-tip="The classic tooltip with some <b>bold</b> text.">hover</a>
            
<a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:info" 
   data-tip="<em>A Title</em>This help tooltip includes a title.">hover</a>
            
<a href="javascript:void(0)" class="lytetip" data-lyte-options="tipStyle:help" 
   data-tip="<em>Information</em><p>Here is a paragraph.</p>">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>

<a href="javascript:void(0);" class="lytetip" 
   title="The classic tooltip with some <b>bold</b> text.">hover</a>
            
<a href="javascript:void(0)" class="lytetip" rev="tipStyle:info" 
   title="<em>A Title</em>This help tooltip includes a title.">hover</a>

changeTipCursor:true|false

Version: 5.2+

Use this option to control whether or not the mouse cursor is changed to a "help" cursor. By default this is set to true.

Demonstration: Mouseover Me

Code Examples:

<a href="javascript:void(0);" class="lytetip" 
   data-lyte-options="changeTipCursor:false"
   data-tip="This is my tooltip text...">Mouseover Me</a>

<a href="javascript:void(0);" class="lytetip" 
   rev="changeTipCursor:false"
   title="This is my tooltip text...">Mouseover Me</a>

tipDecoration:dotted|solid|none

Version: 5.2+

Use this option to set the text-decoration (underline) of the tip link. By default this is set to "dotted".

Demonstration: tipDecoration:dotted | tipDecoration:solid | tipDecoration:none

Code Examples:

<a href="javascript:void(0);" class="lytetip" 
   data-tip="This is my tooltip text...">Mouseover Me</a>
<a href="javascript:void(0);" class="lytetip" 
   data-lyte-options="tipDecoration:solid"
   data-tip="This is my tooltip text...">Mouseover Me</a>
<a href="javascript:void(0);" class="lytetip" 
   data-lyte-options="tipDecoration:none"
   data-tip="This is my tooltip text...">Mouseover Me</a>

<a href="javascript:void(0);" class="lytetip" 
   title="This is my tooltip text...">Mouseover Me</a>
<a href="javascript:void(0);" class="lytetip" 
   rev="tipDecoration:solid"
   title="This is my tooltip text...">Mouseover Me</a>
<a href="javascript:void(0);" class="lytetip" 
   rev="tipDecoration:none"
   title="This is my tooltip text...">Mouseover Me</a>

tipRelative:true|false

Version: 5.2+

Controls whether or not the tooltip will be positioned relative to the element. If false, tips will be absolutely positioned on the page. Set this to false only if you are having issues with tooltips not being properly positioned. By default this is set to true.

Code Examples:

<a href="javascript:void(0);" class="lytetip" 
   data-lyte-options="tipRelative:false"
   data-tip="This is my tooltip text...">Mouseover Me</a>

<a href="javascript:void(0);" class="lytetip" 
   rev="tipRelative:false"
   title="This is my tooltip text...">Mouseover Me</a>

Lytebox Library Functions

This section discusses the Lytebox library functions which are available for use as the page is loading, meaning that you can use them in the <HEAD> section of your web page before the page is fully loaded, with exception to the $lb.launch() function which requires that the page be fully loaded so that the viewer can properly initialize.

$(id)

Version: 5.2+

If this is not already defined by another library, then Lytebox will make this a short-hand version of document.getElementById (e.g. $('id').innerHTML), with additional caching to speed up calls for elements previously returned. This will not overwrite existing $() functions, such as those defined by jQuery or prototype.

Code Examples:

<script type="text/javascript">
    $('elementId').innerHTML = 'Hello World!';
</script>

$lb.addClass(options)

Version: 5.2+

The $lb.addClass() function adds a given class name to a particular element if it isn't already assigned, meaning that duplicate class names are not added. Multiple class names can be passed in, separated by a space. The following options are available:

Property Required Data Type Description

name yes string The class name to add.

id maybe string The 'id' of the element to add the class name to. This is required unless you pass in an element instead.

element maybe object A valid reference to the element. Can be used in place of an 'id'.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
name	yes	string	The class name to add.
id	maybe	string	The 'id' of the element to add the class name to. This is required unless you pass in an element instead.
element	maybe	object	A valid reference to the element. Can be used in place of an 'id'.

<script type="text/javascript">
    function myFunction() {
        $lb.addClass({ name: 'red heading', id: 'elementId' });
    }
</script>

<script type="text/javascript">
    function myFunction() {
        $lb.addClass({ name: 'red large', element: $('elementId') });
    }
</script>

$lb.ajax(options)

Version: 5.2+

The $lb.ajax() function supports both GET and POST methods of submission. This function uses object notation for it's parameter list, with the following options being available:

Property Required Data Type Description

url yes string The url where the request should be sent (e.g. 'script.php'). Note that if using GET, then the url should contain all the relevant data in the QS ("name=value pairs).

method maybe string GET (default) and POST are supported. This is only required if using the POST method.

form maybe string The 'name' or 'id' of the form to submit. Note that this value is only required if using the POST method.

updateId no string The 'id' of the element to write back to when the response is received.

success no function Callback handler (function) to call when a successful response is received. Note that the request object is passed as an argument.

fail no function Callback handler (function) to call when the request fails. Note that the request object is passed as an argument.

cache no boolean If true, a timestamp will be added to the request so that non-cached content is returned. This is false by default.

stripTags no boolean If true, HTML tags will be stripped from user input text fields. This is false by default.

timeout no integer The number of milliseconds before the Ajax request is aborted. An aborted request is treated the same as a failed attempt, so anything assigned to the "fail" handler will run.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
url	yes	string	The url where the request should be sent (e.g. 'script.php'). Note that if using GET, then the url should contain all the relevant data in the QS ("name=value pairs).
method	maybe	string	GET (default) and POST are supported. This is only required if using the POST method.
form	maybe	string	The 'name' or 'id' of the form to submit. Note that this value is only required if using the POST method.
updateId	no	string	The 'id' of the element to write back to when the response is received.
success	no	function	Callback handler (function) to call when a successful response is received. Note that the request object is passed as an argument.
fail	no	function	Callback handler (function) to call when the request fails. Note that the request object is passed as an argument.
cache	no	boolean	If true, a timestamp will be added to the request so that non-cached content is returned. This is false by default.
stripTags	no	boolean	If true, HTML tags will be stripped from user input text fields. This is false by default.
timeout	no	integer	The number of milliseconds before the Ajax request is aborted. An aborted request is treated the same as a failed attempt, so anything assigned to the "fail" handler will run.

<script type="text/javascript">
    $lb.ajax({ 
        url: 'http://host.com/script.php', 
        method: 'post',
        form: 'formId',
        updateId: 'elementId',
        success: callThis(r),
        fail: callThat(r),
        cache: false,
        stripTags: true,
        timeout: 30000
    });
</script>

$lb.capitalize(options)

Version: 5.2+

The $lb.capitalize() function capitalizes the first letter of each word in a given string. You can use either object notation (recommended) or simply pass in a string. The following options are available:

Property Required Data Type Description

value yes string The string to capitalize.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
value	yes	string	The string to capitalize.

<script type="text/javascript">
    $('elementId').value = $lb.capitalize({ value: $('elementId').value });
</script>

<script type="text/javascript">
    $('elementId').value = $lb.capitalize($('elementId').value);
</script>

$lb.fadeIn(options)

Version: 5.2+

The $lb.fadeIn() function makes an element fade in (appear). This function uses object notation for it's parameter list, with the following options being available:

Property Required Data Type Description

id yes string The 'id' of the element to fade in.

opacity no integer The starting opacity, which if not passed in is 0 (percent) by default.

speed no integer A value from 1 (slowest) to 5 (fastest) that controls the speed of fade in effect. By default this is set to 5.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
id	yes	string	The 'id' of the element to fade in.
opacity	no	integer	The starting opacity, which if not passed in is 0 (percent) by default.
speed	no	integer	A value from 1 (slowest) to 5 (fastest) that controls the speed of fade in effect. By default this is set to 5.

<a onclick="$lb.fadeIn({ id: 'imageId', speed: 1 })">Hide image</a>

<img id="imageId" src="myImage.jpg" />

$lb.fadeOut(options)

Version: 5.2+

The $lb.fadeOut() function makes an element fade out (disappear). This function uses object notation for it's parameter list, with the following options being available:

Property Required Data Type Description

id yes string The 'id' of the element to fade out.

opacity no integer The starting opacity, which if not passed in is 100 (percent) by default.

speed no integer A value from 1 (slowest) to 5 (fastest) that controls the speed of fade out effect. By default this is set to 5.

display no string Sets the display of the element (inline, block, none, etc.) after the fade out completes.

visibility no string Sets the visibility of the element (hidden, visible) after the fade out completes.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
id	yes	string	The 'id' of the element to fade out.
opacity	no	integer	The starting opacity, which if not passed in is 100 (percent) by default.
speed	no	integer	A value from 1 (slowest) to 5 (fastest) that controls the speed of fade out effect. By default this is set to 5.
display	no	string	Sets the display of the element (inline, block, none, etc.) after the fade out completes.
visibility	no	string	Sets the visibility of the element (hidden, visible) after the fade out completes.

<a onclick="$lb.fadeOut({ id: 'imageId', speed: 1 })">Hide image</a>

<img id="imageId" src="myImage.jpg" />

$lb.getRequestObject()

Version: 5.2+

The $lb.getRequestObject() function returns a cross-browser compatible XMLHttpRequest object that can be used for Ajax requests.

Demonstration: Get Request Object

Code Examples:

<script type="text/javascript">
    var myRequestObject = $lb.getRequestObject();
</script>

$lb.hasClass(options)

Version: 5.2+

The $lb.hasClass() function determines if a particular element has a given class associated with it. The following options are available:

Property Required Data Type Description

name yes string The class name to search for.

id maybe string The 'id' of the element to test. This is required unless you pass in an element instead.

element maybe object A valid reference to the element. Can be used in place of an 'id'.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
name	yes	string	The class name to search for.
id	maybe	string	The 'id' of the element to test. This is required unless you pass in an element instead.
element	maybe	object	A valid reference to the element. Can be used in place of an 'id'.

<script type="text/javascript">
    function myFunction() {
        if (!$lb.hasClass({ name: 'red', id: 'elementId' })) {
            $lb.addClass({ name: 'red', id: 'elementId' });
        }
    }
</script>

<script type="text/javascript">
    function myFunction() {
        if (!$lb.hasClass({ name: 'red', element: $('elementId') })) {
            $lb.addClass({ name: 'red', element: $('elementId') });
        }
    }
</script>

$lb.isEmpty(options)

Version: 5.2+

The $lb.isEmpty() determines if a given argument is empty ('', 'null', null, or undefined). Note that a variable will have the value 'null' when taking an actual null value and converting to a string. You can pass in various data type, such as a string or object. The following options are available:

Property Required Data Type Description

value yes any The value to test for emptiness.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
value	yes	any	The value to test for emptiness.

<script type="text/javascript">
    function myFunction() {
        var myVariable = '';
        if ($lb.isEmpty({ value: myVariable })) {
            // This will execute...
        }
        
        var myObject = null;
        if ($lb.isEmpty({ value: myObject })) {
            // This will execute...
        }
    }
</script>

<script type="text/javascript">
    function myFunction() {
        var myVariable = '';
        if ($lb.isEmpty(myVariable)) {
            // This will execute...
        }
        
        var myObject = null;
        if ($lb.isEmpty(myObject)) {
            // This will execute...
        }
    }
</script>

$lb.isMobile()

Version: 5.2+

The $lb.isMobile() will attempt to determine if the web page is being viewed on a mobile device (mobile phone, tablet, etc.).

Demonstration: Am I a mobile device?

Code Examples:

<script type="text/javascript">
    if ($lb.isMobile()) {
        // This will execute if browsing on a mobile device...
    }
</script>

$lb.launch(options)

Version: 4.0+

The $lb.launch() function allows you to programmatically launch the Lytebox viewer. You can call this from either a JavaScript function or from an elements onclick event handler.

NOTE: From v4.0 - v5.1 the $lb.launch() function accepted 4 parameters instead of an object of name/value pairs. The syntax for those versions is $lb.launch(sUrl, sOptions, sTitle, sDescription).

The $lb.launch() function uses object notation for it's parameter list, with the following options being available:

Property Required Data Type Description

url yes string The URL of the content that you want to display, i.e. '/path/to/myimage.jpg' or '/path/to/mylink.html'.

options no string The viewer options which you would normally specify with the rev or data-lyte-options attribute.

title no string The viewer title which is what you would normally specify in the title or data-title attribute.

description no string The viewer description which is what you would normally specify in the data-description attribute.

Demonstration:
Clicking anywhere in this DIV will launch the Lytebox viewer.

Code Examples:

Property	Required	Data Type	Description
url	yes	string	The URL of the content that you want to display, i.e. '/path/to/myimage.jpg' or '/path/to/mylink.html'.
options	no	string	The viewer options which you would normally specify with the rev or data-lyte-options attribute.
title	no	string	The viewer title which is what you would normally specify in the title or data-title attribute.
description	no	string	The viewer description which is what you would normally specify in the data-description attribute.

<div onclick="$lb.launch({ 
                   url: 'images/orion.jpg', 
                   options: 'showPrint:true',
                   title: 'Orion Nebula',
                   description: 'This is my description, which is optional.' })">
    Clicking anywhere in this DIV will launch the Lytebox viewer.
</div>

$lb.removeClass(options)

Version: 5.2+

The $lb.removeClass() function remove a given class name from a particular element. Multiple class names can be passed in, separated by a space. The following options are available:

Property Required Data Type Description

name yes string The class name to remove.

id maybe string The 'id' of the element to remove the class name from. This is required unless you pass in an element instead.

element maybe object A valid reference to the element. Can be used in place of an 'id'.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
name	yes	string	The class name to remove.
id	maybe	string	The 'id' of the element to remove the class name from. This is required unless you pass in an element instead.
element	maybe	object	A valid reference to the element. Can be used in place of an 'id'.

<script type="text/javascript">
    function myFunction() {
        $lb.removeClass({ name: 'red', id: 'elementId' });
    }
</script>

<script type="text/javascript">
    function myFunction() {
        $lb.removeClass({ name: 'red bold', element: $('elementId') });
    }
</script>

$lb.serialize(options)

Version: 5.2+

The $lb.serialize() returns a text string in standard URL-encoded notation, given a form 'name' or 'id'. The return string is essentially a set of name/value pairs that can be added appended onto a URL. Note that the optional "Strip Tags" will remove HTML tags from text input fields. This is disabled (false) by default. The following options are available:

Property Required Data Type Description

id maybe string The 'id' of the form to serialize. This is required if not passing in a 'name' or 'element'.

name maybe string The 'name' of the form to serialize. This is required if not passing in a 'id' or 'element'.

element maybe object A reference to the form. Can be used in place of id or name.

stripTags no boolean If true, HTML tags will be stripped from user input (text fields). This is false by default.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
id	maybe	string	The 'id' of the form to serialize. This is required if not passing in a 'name' or 'element'.
name	maybe	string	The 'name' of the form to serialize. This is required if not passing in a 'id' or 'element'.
element	maybe	object	A reference to the form. Can be used in place of id or name.
stripTags	no	boolean	If true, HTML tags will be stripped from user input (text fields). This is false by default.

<script type="text/javascript">
    var sParams = $lb.serialize({ id: 'formId', stripTags: true });
    location.href = 'http://host.com/script.php?' + sParams;
</script>

$lb.stripTags(options)

Version: 5.2+

The $lb.stripTags() function strips HTML tags from a string or form element. If a string value is passed in, then the string is returned minus HTML tags. If an 'id' or form element object is passed in, then the value minus HTML tags is written back to the form element. The following options are available:

Property Required Data Type Description

value maybe string The string to strip. This is required if the 'id' and 'element' are not passed in.

id maybe string The 'id' of the form element to strip. This is required if the 'value' and 'element' are not passed in.

element maybe object The form element to strip. This is required if the 'value' and 'id' are not passed in.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
value	maybe	string	The string to strip. This is required if the 'id' and 'element' are not passed in.
id	maybe	string	The 'id' of the form element to strip. This is required if the 'value' and 'element' are not passed in.
element	maybe	object	The form element to strip. This is required if the 'value' and 'id' are not passed in.

<script type="text/javascript">
    // Value is returned and stored in a local variable.
    var sStripped = $lb.stripTags({ value: $('elementId').value });
    
    // The stripped value is written back to the form element.
    $lb.stripTags({ id: 'elementId' });
    
    // The stripped value is written back to the form element.
    $lb.stripTags({ element: $('elementId') });
</script>

$lb.trim(options)

Version: 5.2+

The $lb.trim() removes white space at the beginning and end of the passed in string. You can use either object notation (recommended) or simply pass in a string. The following options are available:

Property Required Data Type Description

value yes string The string value to trim.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
value	yes	string	The string value to trim.

<script type="text/javascript">
    $('elementId').value = $lb.trim({ value: $('elementId').value });
</script>

<script type="text/javascript">
    $('elementId').value = $lb.trim($('elementId').value);
</script>

$lb.validate(options)

Version: 5.2+

The $lb.validate() function validates a given value based on the incoming options (regex, type to validate). This is extremely useful (and recommended) if you wish to validate form values prior to submission. The following options being available:

Property Required Data Type Description

value maybe string The value that we want to test. This is only required if an 'id' or 'element' is not passed in.

id maybe string The 'id' of the form element to test. This is only required if a string value or 'element' is not passed in.

element maybe object A reference to the form element to validate. This is only required if a string value or 'id' is not passed in.

regex no string If a regular expression is passed in, this will be used instead of a type validator.

type maybe function The type of validation to perform. This is required unless a 'regex' is passed in. The following values/validators are supported (mouse over each for a short description):

alnum

alpha

between

date

digits

email

float

image

integer

length

notempty

phone

ssn

url

zip

min no integer The minimum value or length of a string. This is optional if using the 'between' and 'length' type validators, and defaults to 0 if no value is passed in.

max no integer The maximum value or length of a string. This is optional if using the 'between' and 'length' type validators, and defaults to 0 if no value is passed in..

inclusive no boolean If true (default), the min/max value will be included in the 'between' type validator.

allowComma no boolean If true (default), commas will be allowed when using the 'between' and 'float' type validators.

allowWhiteSpace no boolean If true (default), white space will be allowed when using the 'alnum' and 'alpha' type validators.

imageType no string The specific type of image that we want to validate/allow. This is optional if using the 'image' type validator.

Demonstration: View Demonstration

Code Examples:

Property	Required	Data Type	Description
value	maybe	string	The value that we want to test. This is only required if an 'id' or 'element' is not passed in.
id	maybe	string	The 'id' of the form element to test. This is only required if a string value or 'element' is not passed in.
element	maybe	object	A reference to the form element to validate. This is only required if a string value or 'id' is not passed in.
regex	no	string	If a regular expression is passed in, this will be used instead of a type validator.
type	maybe	function	The type of validation to perform. This is required unless a 'regex' is passed in. The following values/validators are supported (mouse over each for a short description): alnum alpha between date digits email float image integer length notempty phone ssn url zip
min	no	integer	The minimum value or length of a string. This is optional if using the 'between' and 'length' type validators, and defaults to 0 if no value is passed in.
max	no	integer	The maximum value or length of a string. This is optional if using the 'between' and 'length' type validators, and defaults to 0 if no value is passed in..
inclusive	no	boolean	If true (default), the min/max value will be included in the 'between' type validator.
allowComma	no	boolean	If true (default), commas will be allowed when using the 'between' and 'float' type validators.
allowWhiteSpace	no	boolean	If true (default), white space will be allowed when using the 'alnum' and 'alpha' type validators.
imageType	no	string	The specific type of image that we want to validate/allow. This is optional if using the 'image' type validator.

<script type="text/javascript">
    function validateForm() {    
    	// Validate an email address.
    	if (!$lb.validate({ element: $('email'), type: 'email' })) {        
            alert('Invalid email address. Please try again.');
            $('email').focus();
            return false;        
        // Ensure a valid zip code is entered.
        } else if (!$lb.validate({ element: $('zip'), type: 'zip' })) {        
       	    alert('Invalid zip code. Please try again.');
            $('zip').focus();
            return false;            
        // Ensure a number is between two values (inclusive - default)
        } else if (!$lb.validate({ element: $('range'), 
                                  type: 'between', min: 50, max: 100 })) {        
            alert('Invalid number. Please try again.');
            $('range').focus();
            return false;        
        // Ensure that a string is not longer than expected.
        } else if (!$lb.validate({ element: $('name'), 
                                  type: 'length', max: 30 })) {        
            alert('Your name is too damn long. Please try again.');
            $('name').focus();
            return false;        
        // Ensure that only letters and numbers (alpanumeric) are used. 
        // Whitespace not allowed.
        } else if (!$lb.validate({ element: $('password'), 
                                  type: 'alnum', allowWhiteSpace: false })) {
            alert('Invalid input. Please try again.');
            $('password').focus();
            return false;        
        }        
        // ... and so on!
    }
</script>