Configuration options
Published on Monday, February 20th 2006.Here you go with a list of configurable options
- bgcolor - any HTML color (Hex/Named)
- width - a number representing SlideShow width in pixel
- height - a number representing SlideShow height in pixel
- left_divisor - a number representing the percentage of right thumbnail strip
- autoLoad - boolean wether or not to show first picture upon load
- autoSlideShow - boolean wether or not to automatically start SlideShow - NOT YET FULLY SUPPORTED
- singleClickCommands - boolean wether or not commands work with single click
- inDirection - string representing the direction the picture follow when appearing (Possible values are: 'left' 'right' 'up' 'down' 'leftup' 'leftdown' 'rightup' 'rightdown' 'default')
- outDirection - string representing the direction the picture follow when disappearing (Possible values are: 'left' 'right' 'up' 'down' 'leftup' 'leftdown' 'rightup' 'rightdown' 'default')
- spinner - animated activity indicator location
- statusTexts - this is an array of texts strings indicating different SlideShow status
- SlideShow loading thumbnails
- SlideShow loading picture
- SlideShow picture loaded
- SlideShow loading more detailed picture
- SlideShow more detailed picture loaded
- Picture not found on server
- useFlickr - boolean, wether or not to use flickr.com picture search
- images - array of arrays representing the pictures to load
first picture of every sub array is considered to be the thumbnail
second picture of every sub array is considered to be the initial picture
subsequent pictures of every sub array are loaded dinamically when user zoom in
You MUST sppecify at least 2 pictures for every sub array. They can be the same thou.
Example:
[
['myPicture_small.jpg','myPicture.jpg'],
['myPicture2_small.jpg','myPicture2.jpg'],
];
- more to come...
Configuration basics
Published on Sunday, February 19th 2006.First of all, there are 2 ways to configure your SlideShow
- Inline configuration - bad, hard, deprecated
- XML configuration - good, faster, easier
Inline configuration example - very deprecated
In you html page, create a div with a unique id:
<div id="destination"> </div>
then, once your page is loaded, via a link, or via an "onload" event attached to the body, create an object with all your options and start your SlideShow:
<script language="JavaScript">
var options = {
width: 600,
height: 500,
images: [
['myPicture_small.jpg','myPicture.jpg'],
['myPicture2_small.jpg','myPicture2.jpg'],
];
background: 'black',
left_divisor: 5,
autoLoad: false,
autoSlideShow: false,
singleClickCommands: true,
inDirection: random,
outDirection: random,
spinner: 'images/indicator.black.gif',
statusTexts: [
'Loading thumbnails..',
'Please wait...',
'Ready',
'Loading more detailed picture',
'Ready',
'Error: image not found!'
]
};
new SlideShow('destination', options);
</script>
Your SlideShow will then appear on your page.... but this it very tricky, and I strongly discourage this way!
XML configuration example - Basic
In you html page, create a div with a unique id:
<div id="destination"> </div>
then, once your page is loaded, via a link, or via an "onload" event attached to the body, start your SlideShow by specifying the url of a XML file:
<script language="JavaScript">
new SlideShow('destination', { url: 'conf.xml' });
</script>
Here is an example of "conf.xml" XML file
<?xml version="1.0" encoding="utf-8" ?>
<slideshow type="object">
<options>
<bgcolor>black</bgcolor>
<left_divisor>5</left_divisor>
<versionText><![CDATA[ SlideShow! ]]></versionText>
<width>600</width>
<height>200</height>
<autoLoad type="bool">false</autoLoad>
<autoSlideShow type="bool">false</autoSlideShow>
<singleClickCommands type="bool">true</singleClickCommands>
<inDirection>down</inDirection>
<outDirection>down</outDirection>
<spinner>images/indicator.black.gif</spinner>
<statusTexts type="js"><![CDATA[
[
'Loading thumbnails..',
'Please wait...',
'Ready',
'Loading more detailed picture',
'Ready',
'Error: image not found!'
]
]]></statusTexts>
</options>
<slides>
<slide>
<image>myPicture_small.jpg</image>
<image>myPicture.jpg</image>
</slide>
<slide>
<image>myPicture2_small.jpg</image>
<image>myPicture2.jpg</image>
</slide>
</slides>
</slideshow>
XML configuration example - Advanced
Given that you have understood the previous example, the following one demonstrates how to use XML configuration to access a Flickr.com stream or, maybe, just search the photos via Flickr.com public APIs.
<div id="destination"> </div>
then, once your page is loaded, via a link, or via an "onload" event attached to the body, start your SlideShow by specifying the url of a XML file:
<script language="JavaScript">
new SlideShow('destination', { url: 'conf.xml' });
</script>
Here is an example of "conf.xml" XML file
<?xml version="1.0" encoding="utf-8" ?>
<slideshow type="object">
<options>
<bgcolor>black</bgcolor>
<left_divisor>5</left_divisor>
<versionText><![CDATA[ SlideShow! ]]></versionText>
<width>600</width>
<height>400</height>
<autoLoad type="bool">true</autoLoad>
<autoSlideShow type="bool">false</autoSlideShow>
<singleClickCommands type="bool">true</singleClickCommands>
<inDirection>down</inDirection>
<outDirection>down</outDirection>
<useFlickr type="bool">true</useFlickr>
<flickrUrl>flickr.com.php</flickrUrl>
<flickrKey>PUT_API_KEY_HERE</flickrKey>
<flickrTags>ajax+javascript</flickrTags>
<flickrTagMode></flickrTagMode>
<flickrPerPage>100</flickrPerPage>
<flickrUserId></flickrUserId>
<flickrExtras>owner_name,icon_server,original_format</flickrExtras>
</options>
</slideshow>
This example will load pictures from Flickr.com via their public api.
Cross Domain Scripting Note: as you might know, JavaScript is restricted to access data from the domain it comes from, i.e. you cannot load XML sources directly from Flickr.com website.
To workaround this security feature, I have created a small proxy script in php ("flickr.com.php") which acts as a data reflector.
You can see the sources here:
<?php
//
// A very simple example that gets a HTTP page.
//
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, "http://www.flickr.com/services/rest/?" . $_SERVER[QUERY_STRING]);
curl_setopt ($ch, CURLOPT_HEADER, 0);
curl_exec ($ch);
curl_close ($ch);
?>