Slidebox 0.6

by Olivier Ramonat

Slidebox is a script used to make (multiple) slideshows on the current page. This javascript, licensed under an LGPL license, reads XML files to get the images comments and image order.

Changelog :

Version 0.6

• By Pierre Nayrolles : Adds setPointer function to fix cursor bug in IE

Version 0.5

• Adds PreloadNext function
• Adds hooks slidebox_showLightbox_hook and slidebox_hideLightbox_hook

Version 0.4

• Hide slidebox thumbnails before the page has loaded.

Version 0.3

• Allow multiple galleries on the same page
• The xml_url is now set in the rel attribute

Version 0.2

• Fixes overlay display
• Closes the loading image when lightbox image is displayed
• Adds a number parameter to the XML file to provide an image number to each lightbox image

Example :

Click on a photo to display it. Then press 'n' or space to see the next one or 'b' to go back to the previous one.

Display a new gallery with an another xml file

Install :

• Include prototype.js, slidebox-setup.js and slidebox.js in your header
   
<script type="text/javascript" src="slidebox-setup.js"></script>  
<script type="text/javascript" src="prototype.js"></script>  
<script type="text/javascript" src="slidebox.js"></script>
• Add rel="lightbox" attribute to a link tag to display the pointed image.
  <a href="image.jpg" rel="lightbox"> Show image.jpg in the lightbox </a>
• Add rel="lightbox_captions" attribute to a link tag to create a gallery using the xml caption file : captions.xml
  <a href="image.jpg" rel="lightbox_captions"> Show image.jpg in the lightbox </a>
• Add an XML file to load caption and to allow slideshow, the XML file is used to calculate the next and previous link and must be formatted as follow :
  <response>
<source id='/path/to/image'>
<caption>Caption text</caption>
<number>1/10</number>
</source>
</response>
  See captions.xml (and captions2.xml) for example.
• Edit slidebox-user.js to specify some variables :
  • var loadingImage = 'path/to/loading.gif'
  • var closeButton = 'path/to/close_button.gif'
  • var objuserMessage = 'Message to display'
  and to toggle hidden/visible the thumbnails.

Download :

Get slidebox.js and slidebox-setup.js

Get and edit slidebox.css, take a look to Lightbox JS to customize style.

Get the latest prototype library on http://prototype.conio.net/ and include it in your header :

Thanks :

Slidebox is based on Lightbox JS, a simple script to overlay images (see the Lightbox project). Slidebox uses the Prototype JavaScript framework and dynamicCSS.js.

Thanks to Joe solid-gold-dancers.photograph-gallery.com, Brenda Schmidt www.opticanatura.com and Pierre Nayrolles aquatrail.netrando.fr for the feedback and bugs reports.

License

This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License (LGPL).