superGallery Stack Tutorial

In this brief tutorial, we'll show you how to set up a superGallery slideshow.

You can download this tutorial and sample RW project to play with it and study more closely how the slideshow was put together.
Please keep in mind that whenever you use javascript libraries like the ones used by this stack, there's a chance of running into conflicts with some themes or other plugins installed on the same page.

OK, let's get started with the tutorial...
The first thing you need to do is add a Stacks page to your project and then drop the superGallery Stack on your page.

Your page should look like the screenshot below. If not, in Edit mode, select the stack by clicking on it and go to Page Inspector>Page and check "Render HTML in Edit mode."

superG1_1

If you Preview your work up to this point, you'll see that you already have a working superGallery slideshow! By default, the stack comes pre-loaded with 4 images saved on the RWExtras server.

To create your own slideshow, click on the first default image and the page will change into this:

superG1_2

Each line starting with <li> and ending with </li> (a line item in HTML code) represents an image. You can copy-and-paste additional line items to suit your needs.

Next, you can add your captions by replacing the default text 'Your caption here' and set the path to your images by modifying the value of the 'src' attribute. If your images are located on your server, your paths will follow this pattern:

'http://mydomain.com/images/myimage.jpg' (with quotes)

If your images are located in your Page Assets (RW4), your paths will follow this pattern:

'assets/myimage.jpg' (with quotes)

If your images are located in your Resources (RW5), your paths will follow this pattern:

'%resource(myimage.jpg)%' or '%resource(myfolder/myimage.jpg)%' (with quotes)

If interested, we've developed a simple worksheet in Excel that can be used to easily create the links, especially if you are adding a large number of images. You can download the file which includes instructions in the body of the worksheet...

Next, you can customize your slideshow by modifying the HUD. More details available on the superGallery info page.

That's it...

  • Your caption 1
  • Your caption 2
  • Your caption 3
  • Your caption 4