SS3: The built-in, "anything" slider.

In 2011 we launched the third iteration of an integrated slide show that we'd been putting in seyDesign RapidWeaver® themes since 2010. This third version, dubbed SS3, was also the first time we'd opened up the source for all developers to use in their own themes.

SS3 allows users to turn just about anything into a slide show. From built-in images, remote images, content, stacks and more!

SS3 icon

SlideBox Snippet by Adam Merrifield, 11 Sep 2012.Download

The SlideBox snippet is a complimentary snippet for use with SeydoggySlideshow 3 (or SS3) enabled themes. The sdSlideBox snippet is a method for creating content based slides using HTML.

Using the built-in slide show controls in your SS3 enabled theme, you can add flare to your content slide show with speed settings, delays and special effects. Or take it a step further and use the advanced tricks in the SS3 User API to link each slide to another destination.

Instructions

  1. Download and install the SlideBox snippet.

  2. Open the Page Inspector (RapidWeaver > View > Show Page Inspector).
  3. Be sure that the setting found in Page Inspector > Styles > Slide show type > Content (SlideBox stack/snippet) is selected.
  4. Paste the sdSlideBox snippet into any content area in RapidWeaver. It will look like this:

    <div class="sdSlideBoxSnippet" id="mySdSlideBox1">
        This content will appear as slide 1.<br/>
        Some sample content. Add whatever you like here.
    </div>
    
    <div class="sdSlideBoxSnippet" id="mySdSlideBox2">
        This content will appear as slide 2.<br/>
        Some sample content. Add whatever you like here.
    </div>
    
    <div class="sdSlideBoxSnippet" id="mySdSlideBox3">
        This content will appear as slide 3.<br/>
        Some sample content. Add whatever you like here.
    </div>
  5. If you've pasted the snippet into a styled-text type area then you need to select the HTML code and ignore the formatting (RapidWeaver > Formatting > Ignore Formatting).
  6. Edit each sample text with any HTML of your liking. Each area is a unique slide. The sample text looks like this:

    This content will appear as slide 1.<br/>
    Some sample content. Add whatever you like here.
  7. To add slides, simply add a new sdSlideBoxSnippet wrapper and number it accordingly. For example, if I wanted to add a forth slide, I would copy the third slide and change the id from mySdSlideBox3 to mySdSlideBox4. Like this:

    <div class="sdSlideBoxSnippet" id="mySdSlideBox4">
        This content will appear as slide 4.<br/>
        Some sample content. Add whatever you like here.
    </div>