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

SlideWH by Adam Merrifield, 11 Sep 2012.Download

The SlideWH snippet is a complimentary snippet for use with SeydoggySlideshow 3 (or SS3) enabled themes. The sdSlideWH snippet is a method for defining externally hosted images to be used in your slide show sequence instead of the built-in images.

Instructions

  1. Download and install the SlideWH 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 > Off / Manual (snippet) is selected.

  4. Paste the sdSlideWH snippet into Page Inspector > Header > JavaScript changing each image source to suit your needs.

    The snippet will look like this:

    sdSS.slideWH = [
        "http://www.example.com/images/header3.jpg",
        "http://www.example.com/images/header5.jpg",
        "http://www.example.com/images/header1.jpg",
        "http://www.example.com/images/header9.jpg",
        "http://www.example.com/images/header15.jpg"
    ];

    The order of the images will coincide with the order of your slides.

  5. To add more images to your slide show sequence:

    1. Add a comma to the end of the image source line that is currently last (i.e. "http://www.example.com/images/header15.jpg",).

    2. Add a new line after the comma.

    3. On the new line, add your new image source in quotations (i.e. "http://www.example.com/images/header20.jpg").

    4. Repeat a through c for each additional link.

      The snippet will now look like this:

      sdSS.slideWH = [
          "http://www.example.com/images/header3.jpg",
          "http://www.example.com/images/header5.jpg",
          "http://www.example.com/images/header1.jpg",
          "http://www.example.com/images/header9.jpg",
          "http://www.example.com/images/header15.jpg",
          "http://www.example.com/images/header20.jpg"
      ];
  6. To remove images from your slide show sequence:

    1. Remove the last image source line (i.e. "http://www.example.com/images/header15.jpg").

    2. Remove the trailing comma from what is now the last image source line (i.e. "http://www.example.com/images/header9.jpg")

    3. Repeat a and b for each image you wish to remove.

      The snippet will now look like this:

      sdSS.slideWH = [
          "http://www.example.com/images/header3.jpg",
          "http://www.example.com/images/header5.jpg",
          "http://www.example.com/images/header1.jpg",
          "http://www.example.com/images/header9.jpg"
      ];