|
|
|
Description: Swiss Army slideshow is an
incredibly versatile image slideshow script. It supports a myriad of
features, from manual image cycling, fade effect between images, to
accompanying text description beneath each slide, linking, and more. It's a
swiss army alright!
Demo:
Directions
Step 1: Insert the below into the HEAD section of
your page:
The above code references an external .js file, which you
should download:
Step 2: Insert the below sample HTML code to the BODY
of your page, which displays the three demos above:
That's it!
Configuration Options
Most configurations of the slideshow are done inside the code of
Step 1 as you define your slideshow array(s). Just for
your reference, here they are in full force:
| Property and sample value |
Description |
| desc_prefix='<b>Description:<\/b> ' |
String prefix for image descriptions display' |
| controls_top=1 |
Use for top controls |
| counter=1 |
Use to show image count |
| width=140 |
Ue to set width of widest image if dimensions vary, may
also be set in the call as the 2nd parameter |
| height=225 |
Use to set height of tallest image if dimensions vary,
may also be set in the call as the 3rd parameter |
| no_auto=1 |
Use to make show completely user operated (no play
button, starts in stopped mode) |
| use_alt=1 |
Use descriptions as the images' alt attributes |
| use_title=1 |
Use descriptions as the images' title attributes |
| nofade=1 |
Use for no fade-in, fade-out effect for this show |
| border=2 |
Set border width for images (number of pixels) |
| border_color='lightblue' |
Set border color for images (string) - use color name or
hex value with # prefix |
| border_style='ridge' |
Set border style for for images (string) - requires
border_color be set |
| no_descriptions=1 |
Use for no descriptions displayed for this slide show |
| pause=1 |
Use for pause onmouseover |
| image_controls=1 |
Use images for controls instead of the default buttons |
| manual_start=1 |
Start show in manual mode (stopped) |
| button_highlight='#cccccc' |
onmouseover background-color for image buttons (string)
(requires image_controls=1) - use color name or hex value with # prefix |
| target='_new' |
Set a target for a slide group, will be overridden by
array_name[#][3], if present |
| specs='width=300, height=250, top=150, left=200,
scrollbars, resizable, location' |
Set new window specifications for a slide group, will be
overridden by array_name[#][4], if present |
| random=1 |
Set a random slide sequence on each page load |
| fadecolor='blue' |
Set fading images' background color, defaults to white
(string) - use color name or hex value with # prefix |
| no_controls=1 |
Use for a slide show with no controls |
| delay=3000 |
Set miliseconds delay between slides for a given show,
may also be set in the call as the last parameter |
| jumpto=1 |
Use for added controls to jump to a particular image by
its number |
| no_added_linebreaks=1 |
Use for no added line breaks in formatting of texts and
controls |
| onclick="window.open(this.href,this.target,'top=0,
left=0, width='+screen.availWidth+', height='+screen.availHeight);return
false;" |
Use this for customized onclick event for linked images: |
All of the above are in fact optional, and if not
specified, the script to fall back to the default settings instead.
Literals must be quoted, numbers should not. The options that have a value
of 1 are Boolean. So, not having them is the same as setting them to 0
and, any value other than 0 or false is the same as 1. The one's with
string values will default to an empty string if not used, except for the
image button's background (highlight) color (only used if using images as
controls) which defaults to yellow.
|
Image Slide shows
