New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opera7+

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 Developer's View

Step 1: Insert the below into the HEAD section of your page:

Select All

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:

Select All

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.