You are here: xnos Labs » Web » Liteshow » Documentation

Documentation

Installation

There are three steps to get your own Liteshow running:

1. Create a XML document in which you store the links to your images.

Skip this step if you only want a single image displayed.

An example structure looks like this:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<liteshow>
    <image src="http://www.xnos.org/fileadmin/labs/liteshow/demo/vancouver/docks.jpg"><title>Dock Vancouver</title></image>
    <image src="http://www.xnos.org/fileadmin/labs/liteshow/demo/vancouver/english_bay.jpg"><title>English Bay Vancouver</title></image>
</liteshow>

A complete and working example can be found in the galleries/ directory of the package.

Move the file in the galleries directory. Name the file e.g. "mygallery.xml". The filename will be the unique ID used later on.

2. Create your HTML page

Create a HTML file and include the Liteshow JavaScript library as well as the
basic CSS code in the header part.

<html>
    <head>
        <title>My Liteshow gallery</title>
        <script src="js/lib/prototype.js" type="text/javascript"></script>
        <script src="js/lib/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
        <script src="js/liteshow.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/liteshow.css" />
    </head>
...

3. Include the Liteshow

Now you can include a link to the Liteshow javascript with the following JavaScript command. The syntax looks like:

Liteshow.ViewName.init('mygallery.xml', { option1: value1, option2: value2 });

You need to replace "ViewName" with a valid view that exists. Three different views come with the package:

HorizontalSlide: Images slide from the right to the left
Fader: Images fade in and out
SlideDown: Images slide down

The first parameter of the init function is 'mygallery.xml', the name of the gallery XML file. You can also include a single image as Liteshow by just setting the absolute path and filename to this image (.PNG, .JPG or .GIF allowed). The optional second parameter is a hash of additional options.

startPos: number or "browse" - the image of the gallery that should be first, can also be "browser" to start in browse-mode (default: 0).
transitionTime: number - seconds how long a transition will take until the image is displayed completely (default: 2).
timer: boolean - whether the automated, timed slideshow should be activated or not.
timerDelay: number - how long a image will be displayed in a timed slideshow until the next one is shown. (default: 5).
singleImageTitle: string - title of the single image if you don't use XML

A full example would be:

<a href="javascript:void(0);" onclick="Liteshow.HorizontalSlide.init('mygallery.xml', { transitionTime: 4, startPos: 'browser' } );">Start my gallery</a

Tweak Your Liteshow

With Liteshow 1.0 it is possible to set global, page-wide configuration options. See the js/liteshow.js file for a full list of all configuration options. Use it like this:

<html>
    <head>
        ... all other inclusions ...
        <script type="text/javascript">
            Liteshow.useBookmarks = false;
            Liteshow.throbber = 'path/to/my/own/loading/image.jpg';
            Liteshow.xmlPath = 'other_galleries/';
        </script>
    </head>
......

Creative Ideas