Extension:Javascript Slideshow

MediaWiki extensions manual - list

Slideshow (Javascript) Release status: stable
Implementation	Tag, Parser function
Description	Create a slideshow (using javascript) from multiple included DIV elements
Author(s)	Chris Reigrut, Key Bank / Key Equipment Finance
Last version	0.2.1 (09/15/2008)
MediaWiki	1.11 - 1.13
License	No license specified
Download	Extension:Slideshow (Javascript)#Installation
Example	Antique Jewelry University www.citwiki.de german citroen wiki www.pspwiki.ch German PSP Wiki
Check usage (experimental)

This extension creates a slideshow which can:

• Create a "rotating" slideshow (i.e. one that changes from one picture 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

Examples

Tag

<slideshow sequence="random" transition="fade" refresh="10000">
<div>[[Image:Image1.jpg|thumb|right|128px|Caption 1]]</div>
<div>[[Image:Image2.jpg|thumb|right|128px|Caption 2]]</div>
<div>[[Image:Image3.jpg|thumb|right|128px|Caption 3]]</div>
</slideshow>

This results 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

{{#slideshow:
<div>Tick</div><div>Tock</div>
|id=bar refresh=1000
}}

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

Installation

1. Create a folder called Slideshow in your extensions folder
2. Download the following files into your Slideshow directory (Copy/paste text)
   1. slideshow.php
   2. slideshow.js
3. If you want to use any transitions other than cut, create a subfolder called scriptaculous within the Slideshow folder, and add:
   1. prototype.js,
   2. scriptaculous.js and
   3. the other .js files (effects.js etc) from Script.aculo.us
4. If embedded images are going to be used, and you want them to show up correctly in Internet Explorer, you'll need to add the following to Mediawiki:Common.css:

.slideshow div {
  _position: absolute;
}

.slideshow div div {
  _position: static;
}

This is because there is a bug in Internet Explorer, where if a div line has an image, the div will be expanded (height and width) to contain the image.

Changes to LocalSettings.php

require_once("{$IP}/extensions/Slideshow/slideshow.php");

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!