Liteshow

A Javascript Library for slideshows

If you are looking for a javascript library that makes you forget you are using the web, you've come to the right place. This is what you will get with Liteshow:

Don't wait

Of course, if you browse through your images it takes so long for the page to load. With the Liteshow caching mechanisms the next images are getting preloaded while viewing the other ones.

Watch this

Nice effect gadgets are coming out of the prototype and script.aculo.us libraries. Of course it is totally easy to add your own views to the slideshow.

No click

With the built-in timer functionality you can sip your coffee without having to click "next image please" all the time.

Share it

Bookmarking made easy, just copy the link from the navigation bar and send it to a friend of yours, he'll see exactly the image you are seeing.

See for yourself

See a demo with the already existing views.

Horizontal Sliding

Simple fading of the images

Sliding Down

How to include Liteshow in your HTML page

Download Liteshow from www.xnos.org.

Create a XML file like this:

<?xml version="1.0" ?>
<liteshow>
	<image src="rome.jpg">
		<title>What a great city</title>
	</image>
	<image src="beach.jpg">
		<title>Italys nicest beaches</title>
	</image>
</liteshow>

Move the images in a subfolder that is named like the XML file. For a xml file like "italy05.xml", the "gallery ID" would be "italy05", and the images need to be put in a folder named /italy05/. If the liteshow option "pathprefix" is set (see below), then the XML and the image folder need to placed in there.

Include Liteshow-JavaScript and Liteshow-CSS in your HTML Header Part

<script src="js/1.7.0/prototype.js" type="text/javascript"></script>
<script src="js/1.7.0/scriptaculous.js?load=effects,builder,slider" type="text/javascript"></script>
<script src="js/liteshow.js" type="text/javascript"></script>

<link rel="stylesheet" href="liteshow.css" type="text/css" media="all" />

Put the following Javascript code in your page to start a show:

Liteshow.ViewName.init('xml_filename_without_ending', { option1, option2 } );

A working example would be:

<a href="javascript:void(0);" onclick="Liteshow.SlideDown.init('kidspeople', { transitionTime: 0.6, timer: false } );">

You can set one of these additional options as the second paramter.

container: 'liteshow'
overlay: 'overlay'
pathprefix: 'galleries/'
startPos: 0
maxHeight: 80
pagetitle: null
controlContainer: 'liteshowControls'
cacheContainer: 'liteshowCache'
cacheNum: 4
transitionTime: 2
timer: true
timerDelay: 5
automaticRewind: true

License

Liteshow is released under a MIT-style license. Please see the "LICENSE" file in the package.

Copyright

Most images from the demo page are taken from photocase.de.