RWExtras : Simpler webdev, one stack at a time…

superGallery/superGallery 2 Stack

superGallery Stack Settings*

Width: width in pixels of the gallery area
Height: height in pixels of the gallery area
Buttons (1-7)**: select among the 7 different buttons styles and colors. Adding a 'v' after the number selects the same button in vertical style for left/right navigation thumbnails
Background: set the background color for the gallery area and navigation thumbnails
Border: set the color of the gallery border
Border (px): set the width of the border surrounding the gallery area (up to 50px)
Border radius: set the radius of the gallery border
Drop Shadow: check to activate the drop shadow effect
Show captions: check to activate the captions
Caption bg: set the color of the caption background
Caption text (color): set the color of the text in the captions
Caption text (size): set the size of the text in the captions
Caption opacity: set the opacity of the caption background
Caption position: select between 'top' and 'bottom' (without quotes)
Pointer: set the color of the pointer that identifies the current image being displayed
Hide Navigation: check to hide the Navigation thumbnails
Nav position: select among 'top', 'bottom', 'right', or 'left' (without quotes)
Duration (sec): set the duration in seconds for each image. Set to a large number, e.g. 9999 for manual transitions

superGallery 2 Stack Settings*

Same as superGallery except that it has one additional option:

# of images: select the number of images to include in your slideshow

*If the info box (HUD) is too long for your screen size, follow these 3 steps:

Drag the RW project window down
Drag the info box (HUD) up, past the top of the RW project window
Drag the RW project window back up

The bottom of the info box (HUD) should be visible...

**These are the 7 button styles available in 2 versions, for horizontal or vertical navigation thumbnails. The number alone selects the horizontal version and the number followed by a 'v' selects the vertical version:

Buttons

A few important things to keep in mind about working with images that you drop into image wells and ensure that your images will display at their best quality:

1) RapidWeaver will usually scale down your images therefore, the quality of your images will suffer. To correct this, simply open the Media Inspector and set the Scale back to 100%

Image Scale

2) We also recommend adding a Filename and Alt Tag to each image: it's a good design practice, it can help your SEO efforts, and will prevent RW from uploading the images every time you publish your page

name and tag

3) Stacks will convert images to PNG format by default. In general, PNG files are much larger than JPEGs therefore, if you want to keep your images small, you must go to Page Inspector>General and select JPEG from the Image Format drop down menu. Yes, contrary to what you would expect, the "Original" option in Image Format will also convert your images to PNG

Image Format

4) Next, make sure that the settings in Page Inspector>Page>Preferences "Reduce large images" are large enough to fit your images

Stacks Preferences

5) Make sure that RapidWeaver>Preferences>General, "Automatically resize larger images" is unchecked

RW Preferences