Extension:JavascriptSlideshow

What can this extension do?
This extension allows you to create a slideshow (that uses Javascript) from the contents of several    elements on a page. Practically, this allows you to do a bunch of fun things: and probably a lot more that I haven't even thought of!
 * Create a "rotating" banner (i.e. one that changes from one banner to another)
 * Create stop-action animation from multiple images or multiple pieces of text
 * Swap between a text and image (e.g. the tags that would create something, and an image of what the results would be)

Options / Attributes

 * id: The id to be given to the div containing the content. This allows you to pre-specify the id for styling purposes.  If none is specified, the id will be a randomly generated number starting with 'slideshow_' (e.g. slideshow_12345).
 * refresh: The time, in milliseconds, between transitions. The default is 1000 milliseconds (one second).
 * sequence: The sequence in which to display the content.  Must be one of the following values:
 * random: This is the default if no sequence is specified.
 * forward
 * backward


 * transition: How to transition (change) between content.  Must be one of the following values:
 * cut: A straight cut from the current content to the new content. This is the default if no sequence is specified.
 * fade: A one-second fade between the current content and the new content.
 * blindDown: The new content "rolls down" over the exising content.  Note: this seems to have trouble with some images

Tag
 would result in a div (with a randomly generated id) that randomly changed every 10 seconds between the three images specified (which happen to be wiki images).

Parser Function
would result in a div (with an id of bar) that changed every second between the words Tick and Tock.

Installation
 .slideshow div { _position: absolute; }
 * 1) Create a directory called Slideshow in your extensions directory
 * 2) Download the following files into your Slideshow directory (Copy/paste text)
 * 3) slideshow.php
 * 4) slideshow.js
 * 5) If you want to use the cool transitions (e.g. anything other than cut), create a subdirectory called scriptaculous within the Slideshow directory, and add (a) prototype.js, (b) scriptaculous.js and (c) the other .js files (effects.js etc) from Script.aculo.us
 * 6) If you're going to use embedded images within your divs, and you want them to show up correctly in IE, you'll need to add the following to Mediawiki:Common.css:

.slideshow div div { _position: static; }


 * as there is a bug in IE, where if a div contains an img, the div will be expanded (height and width) to contain the img.

Revision History

 * 0.2.1 (09/15/2008):More changes to the way that the divs are displayed, and added a spacer div (since the main div is now positioned absolutely in order to deal with IEs CSS failings).
 * 0.2.0 (09/02/2008):Modified the way that the embedded divs are displayed to allow more control over styling
 * 0.1.0 (07/30/2008):Initial release, marked beta.

Sites using this extension
Please add your site (and a link if it is public) to the list! Thanks!
 * Key National Finance WiKey (internal intranet)
 * Antique Jewelry University
 * www.citwiki.de german citroen wiki