Swiss Army Image Slideshow
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.