Installation
1. Download the latest version of the product from the Creative Clans website (http://www.creativeclans.nl)
2. Unzip the package in a folder on your computer
3. Upload the CCSlideShow folder to your site
4. Copy the code in the index.html example file in the package, and paste it into your page’s code
5. To modify the look and feel of the slide show, and to get it to show YOUR slides, read the rest of this document
Show my slides (the beginning)
1. Put your images online in the ‘images’ subfolder of the ‘CCSlideShow’ folder
2. Edit the CCSlideShow.xml in the ‘CCSlideShow’ folder (a detailed explanation of the slides xml document follows further down)
Since the html code and the config xml document included in the package are set up to work with the folder structure present in the package, it should work without a problem.
If you want to change something (for example save the images in another folder, or change the name of the xml documents), you’ll have to set some parameters. Keep reading to learn about it.
CCSlideShow.xml
If you’re going to use the ‘Load all images from folder’ option (read further down), then you can skip this chapter. Enabling ‘Load images from all folders’ the slide show ignores whatever data there is in the CCSlideShow.xml file, so there’s no need to modify it.
Contains the info of the slides. The structure must be that of the CCSlideShow.xml included in the package you downloaded. Just make a copy and edit it.
For each slide, you have to provide four tags: itemName, itemCaption, itemLink and itemLinkTarget. None of them has to contain any data, but they have to be present.
itemName: The name of the slide. Not used by the slide show, it’s for your own convenience.
itemCaption: Shown as caption by the slide show (unless you switch captions off).
itemLink: If links are enabled, clicking on the slide will open a new window with the page defined in this tag. If no link is inserted, no window will be opened. If a link is defined in the config xml document (see further down), that link will override the links defined in this document for the single slides.
itemLinkTarget: Specifies the target window of the link specified for the slide, or the default link specified in the config xml document. If no target is specified for the slide, the default target specified in the config xml document will be used.
Possible values:
_self specifies the current frame in the current window.
_blank specifies a new window.
_parent specifies the parent of the current frame.
_top specifies the top-level frame in the current window.
CCSlideShowConfig.xml
Contains the parameters that set the look and feel of the slide show. The structure must be that of the CCSlideShowConfig.xml included in the package you downloaded. Just make a copy and edit it.
You only have to include the parameters you want to give a non-default value. All parameters that are missing in this document will be set to their default value.
Example:
<parameter name="backgroundColor">0xB5B5B5</parameter>
Parameters:
- path
Contains the path (relative or absolute) to the slides folder, WITH the final slash
(See the “Relative or absolute path” paragraph further down in the document).
Default: images/
- loadFromFolder
If ‘yes’, the slide show loads all images present in the folder set in the ‘Path’ setting.
Can be used only if ‘scriptPath’ is set, and the script can be run on the server that hosts the site.
The slide show zip file contains a PHP script (CCSlideShow.php) that contains all code needed, and can be used on a site that can run PHP scripts.
Possible values: yes, no
Default: no
Attention: if set to ‘yes’, all info in the ‘CCSlideShow.xml’ file will be ignored. This means you won’t be able to set different captions, links and link targets for each slide.
- proxyFlag
If yes, cross domain image loading is possible (a proxy script is used to load the images).
Can be used only if ‘scriptPath’ is set, and the script can be run on the server that hosts the site.
The slide show zip file contains a PHP script (CCSlideShow.php) that contains all code needed, and can be used on a site that can run PHP scripts.
Possible values: yes, no
Default: no
- scriptPath
Contains the path to the script optionally used by the slideshow
The path has to be absolute (starting with ‘http://’)
Used when ‘Proxy flag’ is enabled, or ‘Load from folder’ is enabled
Default: CCSlideShow.php
Attention: the default value will cause flash to give an error. You must change this value into the absolute path.
- autoResize
If ‘yes’, the images used in the slide show will be resized to the size of the slide show.
Possible values: yes, no
Default: yes (to assure backward compatibility with previous versions)
- backgroundColor
Background color
Value has to be in the format 0xXXXXXX
(see the Color codes paragraph further down in the document for more info on the format)
Default: 0xFFFFFF (white)
- backgroundAlpha
Background transparancy value
Value has to be numeric from 0 to 1.0
Default: 1.0
- loops
Number of loops
Value has to be numeric
Value 0 means infinite loops
Default: 0
- effectTime
Duration of the transition effect between slides (in seconds)
Value has to be numeric
Default: 1
- wait
Time the slide is shown (in milliseconds)
The waiting starts at the end of the transition effect
Value has to be numeric
Default: 3000 (3 seconds)
- includeEffects
List of transition effects to be used (separated by comma, no spaces (!))
Example: fadein,fadeout
(if you want to use all available effects, omit this parameter of leave it empty)
Possible values: see further down
Default: empty
- excludeEffects
List of transition effects not to be used (separated by comma, no spaces (!))
(if you want to use all available effects, omit this parameter of leave it empty)
Possible values: see further down
Default: empty
- stopOnMouseOver
If ‘yes’, the slide show is paused while the mouse hovers over the slideshow
Possible values: yes, no
Default: no
- enableLinks
If ‘yes’, clicking on the slide will open the link defined in the link parameter,
or, if that doesn’t have a value, the link defined for each slide in CCSlideShow.xml
Possible values: yes, no
Default: no
- link
Used when the link for the single slide in CCSlideShow.xml hasn’t been set
Default: empty
- LinkTarget
Used when the target for the single slide in CCSlideShow.xml has not been defined
Possible values:
_self specifies the current frame in the current window.
_blank specifies a new window.
_parent specifies the parent of the current frame.
_top specifies the top-level frame in the current window.
Default: _blank
- order
Order in which the slides are shown
Possible values: forward, backward, random
Default: forward
- slides
Number of slides to be shown
Value has to be numeric
Value 0 means all slides
Is used when Order is random
Default: 0
- watermark
Contains the path (relative or absolute) to the image to be used
(See the “Relative or absolute path” paragraph further down in the document).
Default: empty
- watermarkAlpha
Watermark image transparancy value
Is used when watermark contains a value
Value has to be numeric from 0 to 1.0
Default: 1.0
- watermarkFullScreen
If yes, the watermark image will be stretched to fill the entire slide show window.
Possible values: yes, no
Default: no
- watermarkHorizontalOffset
Is used when Watermark full screen is no
Value has to be numeric
Default: 0
- watermarkVerticalOffset
Is used when Watermark full screen is no
Value has to be numeric
Default: 0
- borderStyle
Possible values: none, solid, blurred, image
Default: none
- borderColor
Is used when Border style is solid or blurred
Value has to be in the format 0xXXXXXX
(see the Color codes paragraph further down in the document for more info on the format)
Default: 0×000000 (black)
- borderThickness
Border thickness in px
Is used when Border style is solid or blurred
Value has to be numeric
Default: 1
- borderAlpha
Border transparancy value
Is used when Border style is solid or blurred
Value has to be numeric from 0 to 1.0
Default: 1.0
- borderImage
Is used when Border style is image
Has to contain the relative or absolute path to the image to be used
(See the “Relative or absolute path” paragraph further down in the document).
Default: empty
- captionStyle
Possible values: none, fixed, hide (appears when the mouse hovers over the slide)
Default: none
- captionType
Is used when Caption style is fixed or hide
Possible values: text, image
Default: text
- captionImage
Is used when Caption style is fixed or hide, and Caption type is image
Has to contain the relative or absolute path to the image to be used
(See the “Relative or absolute path” paragraph further down in the document).
Default: empty
- captionBackgroundColor
Is used when Caption style is fixed or hide, and Caption type is text
Value has to be in the format 0xXXXXXX
(see the Color codes paragraph further down in the document for more info on the format)
Default: 0×000000 (black)
- captionColor
Caption text color
Is used when Caption style is fixed or hide, and Caption type is text
Value has to be in the format 0xXXXXXX
(see the Color codes paragraph further down in the document for more info on the format)
Default: 0xFFFFFF (white)
- captionText
Is used when Caption style is fixed or hide, and Caption type is text
If used, it replaces the caption text of the single slides set in the slides xml document
Default: empty
- captionTextRightMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0
- captionTextLeftMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0
- captionTextBottomMargin
Is used when Caption style is fixed or hide, and Caption type is text
Has to be a numeric value
Default: 0
- captionTextFont
Is used when Caption style is fixed or hide, and Caption type is text
If the font doesn’t exist, the default flash font (Times New Roman) will be used
Default: Times New Roman
- captionTextFontSize
Is used when Caption style is fixed or hide, and Caption type is text
Default: 12
- captionBackgroundAlpha
Caption background transparancy value
Is used when Caption style is fixed or hide
Value has to be numeric from 0 to 1.0
Default: 1.0
- captionPosition
Is used when Caption style is fixed or hide
Possible values: top, bottom, offset
Default: top
- captionHorizontalOffset
Is used when Caption position is offset
Value has to be numeric
Default: 0
- captionVerticalOffset
Is used when Caption position is offset
Value has to be numeric
Default: 0
Transition effects
- none
- fadeout
– fadein
– upout
– upin
– downout
– downin
– leftout
– leftin
– rightout
– rightin
– leftupout
– leftupin
– rightupout
– rightupin
– rightdownout
– rightdownin
– leftdownout
– leftdownin
– shrinkleftup
– growleftup
– shrinkleftdown
– growleftdown
– shrinkrightup
– growrightup
– shrinkrightdown
– growrightdown
– shrinkcenter
– growcenter
Show my slides (advanced)
The most basic configuration is the following:
<folder> (folder that contains the page)
page.html (or .php)
CCSlideShow.swf
CCSlideShow.xml
CCSlideShowConfig.xml
proxy.php
<images> (contains the images)
In this case, the following code in the html will include the slide show:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="300" height="225">
<param name="movie" value="CCSlideShow.swf" />
<param name="wmode" value="opaque" />
<embed src="CCSlideShow.swf"
type="application/x-shockwave-flash"
wmode="opaque"
pluginspage="http://www.macromedia.com/go/getflashplayer"
width="300" height="225" />
</object>
Also, there’s no need to set the folder in the config xml document (the default value is ‘images/’).
When, however, you want to change something in the folder structure, you’ll need to make some changes in the html (when the .swf and/or the xml documents aren’t in the same folder as the html/php page and/or have a different name) and/or the config xml document (when the images are stored somewhere different from the ‘image’ subfolder).
Example 1 : Slide show in a subfolder
If you don’t want to put the slide show flash object in the same folder as the page that calls it, you’ll have to point to it. The path has to point to it starting from the page that calls it. This is the configuration in the package you downloaded.
<folder> (folder that contains the page)
page.html (or .php)
<CCSlideShow>
CCSlideShow.swf
CCSlideShow.xml
CCSlideShowConfig.xml
proxy.php
<images> (contains the images)
The html code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="300" height="225">
<param name="movie" value="CCSlideShow/CCSlideShow.swf" />
<param name="wmode" value="opaque" />
<param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlideShow.xml" />
<embed src="CCSlideShow/CCSlideShow.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
wmode="opaque"
width="300" height="225"
FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlideShow.xml" />
</object>
There are 2 differences:
1. The relative path has been added in front of CCSlideShow.swf
2. The Flashvars parameter has been added to point to the two xml documents, with 2 variables:
– config (contains the path and name of the config xml document)
– slides (contains the path and name of the slides xml document)
The path to the xml documents can be absolute or relative. If it’s relative, it has to be so starting from the page containing the html code.
Since the ‘images’ folder has a different position as well (it’s no longer a subfolder from the folder where the page with the html code resides), the ‘path’ parameter in the config xml document has to be set:
<parameter name="path">CCSlideShow/images/</parameter>
The path to the images can be absolute or relative. If it’s relative, it has to be so starting from the page containing the html code.
Example 2 : the xml documents have a different name
By default, the two xml files used by the slideshow are called ‘CCSlideShow.xml’ (contains the slide info) and ‘CCSlideShowConfig.xml’. You can, however, call them any way you like. Which becomes a must when you want to use more than one slide show on your site. All you have to do is point the slide show to the xml documents through the Flashvars parameter (just like in example 1).
Let’s assume that we want to show 2 different slide shows, both with the same look and feel (one config xml document), but with different slides to show (two slides xml documents).
All images will be stored in the same folder (otherwise we would need two config xml documents).
<folder> (folder that contains the page)
page.html (or .php)
<CCSlideShow>
CCSlideShow.swf
CCSlides1.xml
CCSlides2.xml
CCSlideShowConfig.xml
proxy.php
<images> (contains the images)
The html code for the first slide show:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="300" height="225">
<param name="movie" value="CCSlideShow/CCSlideShow.swf" />
<param name="wmode" value="opaque" />
<param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides1.xml" />
<embed src="CCSlideShow/CCSlideShow.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
wmode="opaque"
width="300" height="225"
FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides1.xml" />
</object>
The html code for the second slide show:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="300" height="225">
<param name="movie" value="CCSlideShow/CCSlideShow.swf" />
<param name="wmode" value="opaque" />
<param name="FlashVars" value="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides2.xml" />
<embed src="CCSlideShow/CCSlideShow.swf"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
wmode="opaque"
width="300" height="225"
FlashVars="config=CCSlideShow/CCSlideShowConfig.xml&slides=CCSlideShow/CCSlides2.xml" />
</object>
Loading all images from a folder
From version 1.3, it is possible to have the slide show load all gif, jpeg/jpg and png files present in the folder you’ve set in the ‘path’ parameter.
ATTENTION! To use this option, you have to have the possibility to run scripts on your website. The slide show’s zip file contains a file called CCSlideShow.php, which contains the scripts necessary to load the images from a folder using PHP.
ATTENTION! If you use this option, all info in the ‘CCSlideShow.xml’ file will be ignored. This means you won’t be able to set different captions, links and link targets for each slide.
To load all images from the ‘path’ folder, set the ‘loadFromFolder’ parameter to ‘yes’, and set the ‘scriptPath’ parameter with the absolute path (starting with ‘http://’) to the script that is to be called. The default value of the ‘scriptPath’ parameter is ‘CCSlideShow.php’, which must be completed with the absolute path pointing to this script.
Read the ‘relative or absolute path’ paragraph to see what kind of paths (absolute, relative) you can/must use when loading all images from a folder.
Loading images using a proxy
From version 1.3, it is possible to load the images not directly from the flash slide show object, but through a proxy script. The advantage of this is, that ‘cross domain’ loading will no longer cause the slide show to fail loading the images.
Note:
Cross domain loading occurs when you want the slide show to load images that are saved on another domain (for example your site is called ‘www.mysite.com’, and the images are saved on ‘www.myimages.com’), but also when your site is called ‘mysite.com’, and the images are found on ‘www.mysite.com’, which is really the same domain, but flash doesn’t understand that.
ATTENTION! To use this option, you have to have the possibility to run scripts on your website. The slide show’s zip file contains a file called CCSlideShow.php, which contains the scripts necessary to load the images through a proxy using PHP.
To load the images through a proxy, set the ‘loadFromFolder’ parameter to ‘yes’, and set the ‘scriptPath’ parameter with the absolute path (starting with ‘http://’) to the script that is to be called. The default value of the ‘scriptPath’ parameter is ‘CCSlideShow.php’, which must be completed with the absolute path pointing to this script.
Read the ‘relative or absolute path’ paragraph to see what kind of paths (absolute, relative) you can/must use when loading images through a proxy.
Relative or absolute path
If you must use relative or absolute paths, depends on the setting of the ‘loadFromFolder’ and ‘proxyFlag’ options, and on which path we’re talking about:
- the ‘path’ setting
+-----------------------------------------------------------------------------------+
| OPTIONS | PATH |
+----------------+-------+----------+-----------+-----------+-----------------------+
| loadFromFolder | proxy | absolute | relative | relative | relative to page with |
| | | (1) | from root | to script | embedded flash object |
| | | | (2) | (3) | (4) |
+----------------+-------+----------+-----------+-----------+-----------------------+
| no | no | x | x | | x |
+----------------+-------+----------+-----------+-----------+-----------------------+
| yes | no | x | x | x | |
+----------------+-------+----------+-----------+-----------+-----------------------+
| no | yes | x (5) | | | |
+----------------+-------+----------+-----------+-----------+-----------------------+
| yes | yes | x (5) | | | |
+----------------+-------+----------+-----------+-----------+-----------------------+
- all other paths in the config xml file (except for the scriptPath, which must always be absolute)
+--------------------------------------------------------------------+ | OPTIONS | PATH | +--------------------+-----------------------+-----------------------+ | proxy | absolute | relative | relative | relative to page with | | | (1) | from root | to script | embedded flash object | | | | (2) | (3) | (4) | +--------------------+-----------+-----------+-----------------------+ | no | x | x | | x | +--------------------+-----------+-----------+-----------------------+ | yes | x | | | | +--------------------+-----------+-----------+-----------------------+
- the paths of the config and slides Flashvars parameters in the html code
+-----------------------------------------------------------------------------------+ | OPTIONS | PATH | +----------------+-------+----------+-----------+-----------+-----------------------+ | loadFromFolder | proxy | absolute | relative | relative | relative to page with | | | | (1) | from root | to script | embedded flash object | | | | | (2) | (3) | (4) | +----------------+-------+----------+-----------+-----------+-----------------------+ | no | no | x | | | x | +----------------+-------+----------+-----------+-----------+-----------------------+ | yes | no | x | | | | +----------------+-------+----------+-----------+-----------+-----------------------+ | no | yes | x | | | | +----------------+-------+----------+-----------+-----------+-----------------------+ | yes | yes | x | | | | +----------------+-------+----------+-----------+-----------+-----------------------+
(1) Starting with ‘http://’
(2) Starting with ‘/’
(3) Relative to the folder where the script is stored
(4) Relative to the folder where the page with the embedded flash object is stored
(5) In the PHP script that is part of this version, the absolute URL will be transformed in a ‘relative from root’ one to get the list of the images from the folder
Color codes
All color codes must be set in the form
0xXXXXXX
where XXXXXX is the 6 digit hexadecimal color code.
For example, 0×000000 is black, and 0xFFFFFF is white.
On the internet, a search for ‘hex color codes’ will give many sites where you can find these codes.
An exhaustive chart can be found here.
Loading ...
[...] slide show: documentation | [...]