View RSS Feed


Swiss Army II

Rate this Entry
I just wanted to Blog this info to make it easy to find. It regards the Swiss Army Slide Show script:

Because many people want even more flexibility than it originally provided, I've updated it (script only, right click 'save as'):

This is a drop in replacement for swissarmy.js and requires no changes in the on page code other than to use this new external script in place of the original external script.

However - It adds the following style hooks (some were already there in the original version but undocumented on its demo page):

  • #outer$ - outer division containing the show images.
  • #master$ - division directly nested in #outer$, contains the two divisions that hold the tables that hold the images.
  • #canvas$_0 - one of the two divisions that holds a table that holds the images.
  • #canvas$_1 - the other of the two divisions that holds a table that holds the images.
  • #desc$ - outer division containing the descriptions (holds the description prefix text, if used, and the below description span).
  • #imgdsc$ - span that holds the descriptions.
  • #counter$ - outer division holding the counter.
  • #thecnt$ - span updated with actual image counter.
  • #controls$ - outer division for the controls, if using images for buttons, this is actually a table.
  • #prev$ - input button for previous image.
  • #gostp$ - input button that starts or stops the slide show (a toggle).
  • #next$ - input button for next image.
  • #goto$ - text input for jumpto feature.
  • #go$ - input button "GO" button for jumpto feature.

Each slideshow on your page has a number. The first one is 0, the second one is 1 and so on. If you only have one slideshow, it's 0. So to style the description's outer container for it, use a style rule like (for example, replacing the $ with the number corresponding to the slideshow):

#desc0 {
 position: relative;
 top: - 5px;
The script also adds the following optional configuration properties:

  • slides#.previous_value - defaults to ' << '
  • slides#.next_value - defaults to ' >> '
  • slides#.move_desc_up - set to 1 to move descriptions up for shorter images, requires position:relative; and z-index:100; for #imgdsc$ style selector.
  • slides#.desc_pic_width - set to 1 for description container (#desc0) width to follow changing image widths
  • slides#.count_prefix - text to prefix the count, defaults to 'Viewing Image: '
  • slides#.count_sep - text to separate the two count numbers, defaults to 'of'
  • slides#.once - Stop after one revolution? Use 1 for stop at last slide, 2 for stop at first slide. Omit or use 0 for continuous slide show.

Edit: Amended to include slides#.once property 8/10
Add precision in the description of this update 9/10

Submit "Swiss Army II" to Submit "Swiss Army II" to StumbleUpon Submit "Swiss Army II" to Google Submit "Swiss Army II" to Digg

Updated 09-28-2010 at 12:33 AM by jscheuer1 (various updates as noted (see end of main entry))

Tags: None Add / Edit Tags
DD Scripts Mods


  1. kuau's Avatar
    Thanks, John. This is a really excellent script. I'm sure I speak for thousands when I express huge appreciation for your brilliance. You're the best!!! Mahalo plenty.
  2. MichiganJim's Avatar
    I have to add a thanks too. It was just last night that I ran into a need to adjust the alignment and Voila!, you posted the fix.

    Follow up question though, I'm trying to format a page to also load on smart phones sans images. I know I can write jscripts to suppress it, but at present I have the reformatting working perfectly with a minimum of CSS adjustments.

    Any thoughts on how CSS can stop or hide the slideshow? So far I haven't hit on it myself.
  3. jscheuer1's Avatar
    Quote Originally Posted by MichiganJim
    Any thoughts on how CSS can stop or hide the slideshow? So far I haven't hit on it myself.
    display: none;

    If you want more help though, please post a new thread in: