Developer manual

Slideshow Plugin

Elements in italic are unconfirmed.

Feed Plugin Format: ////// UNTESTED

<p>
<select name="feed">
<option value="table">assets</option>
<option value="status">3</option>
<option value="format">twpaustralia.header.xslt</option>
<option value="page">header</option>
</select>
</p>

Slideshow Plugin Format:

<p>
<select name="slideshow">
<option value="setup">autoLoad:true</option>
<option value="parameters">duration:5.5,autoStart:false</option>
<option value="var">h1</option>
<option value="table">assets</option>
<option value="page">header</option>
<option value="id">headerslideshow</option>
<option value="class">crossfade</option>
<option value="width">600</option>
<option value="height">200</option>
<option vlaue="crop">1</option>
<option value="mask">:path:to:image:mask.png</option>
<option value="format">png</option>
<option value="class">crossfade</option>
<option value="controls">none</option>
<option value="previous">Previous</option>
<option value="next">Next</option>
</select>
</p>

Options:

  • setup [ default: 'autoLoad:false' ]
  • parameters [ default: 'duration:1.5,autoStart:false' ] - parameters controlling crossfade.js
  • var [ default: 'cf1' ] - the javascript instance of the crossfader var
  • table [ default: 'pages' ] - the table where the page with the slideshow is stored
  • page [ default: id of the currently rendered page ] - the pageid of the page with the slideshow
  • id [ default: 'crossfader' ] - the xhtml id of the generated slideshow
  • class [ default: 'crossfade transition-fadeoutresizefadein' ] - the class of the slideshow, which controls the crossfade.js effects
  • width [ default: ] - width of the image in the slideshow
  • height [ default: null ] - height of the image in the slideshow
  • crop [ default: null ] - '1' to crop the input image to the exact specified by height and width
  • mask [ default: null ] - png mask file
  • format [ default: 'jpg' ] - format of image file to generate
  • controls [ default: null ] - if set to 'none' the next/previous and counter elements are hidden
  • previous [ default: 'Previous' ] - label for the slideshow previous control
  • next [ default: 'Next' ] - label for the slideshow next control

Examples

Javascript

INPUT:

<option value="setup">autoLoad:true</option>
<option value="id">headerslideshow</option>
<option value="parameters">duration:5.5,autoStart:false</option>
<option value="var">h1</option>

OUTPUT:

<script type="text/javascript"><!--//--><![CDATA[
Crossfade.setup({ autoLoad:true });
<!--//-->]]</script>
<script type="text/javascript"><!--//--><![CDATA[
var cf1 = new Crossfade('headerslideshow', { duration:5.5,autoStart:false });
<!--//-->]]</script>

XHTML

INPUT:

<option value="table">assets</option>
<option value="page">header</option>
<option value="id">headerslideshow</option>
<option value="width">600</option>
<option value="height">200</option>
<option value="crop">1</option>
<option value="mask">:path:to:image:mask.png</option>
<option value="format">png</option>
<option value="class">crossfade</option>

OUTPUT:

<div id="slideshow">
<ul id="headerslideshow" class="crossfade">
<li>
<a class="loadimage" href="/cache/path/:upload:assets:header:image.jpg/<...>/<...>/name/image.jpg">
image.jpg
</a>
</li>
</ul>
</div>