Table of Contents

Applying Slider

Step 1:

Export your desired images on the Resources section of RapidWeaver. Resources is located on the leftmost side of the application. The slider corresponds to the images exported on this section, so take heed to this when applying them.

Step 2:

Locate the Seaworthy Slider Snippet on the Snippets section of RapidWeaver. You can also copy and paste it from below.

Further examination displays the code for the slider. Each sub-div within the sliderContent div registers as one slide for the slider. Apply another sub-div for two slides, and so forth.

Within each sub-div, there are five data-type options:

data-image-name: Insert the name of the image file on this section from the “Resources” section.

*data-split: This determines the transitioning animation for each slide (See below for all types of animations).

data-caption-header: Adjust the header for each slide.

data-caption-text: Adjust the middle text for each slide.

data-caption-cite: Adjust the bottom text for each slide.

*Data Split Animations:

horizontal

horizontal-right

horizontal-left

horizontal-clockwise

horizontal-counterclockwise

vertical

vertical-top

vertical-bottom

vertical-clockwise

vertical-counterclockwise

Step 3:

Attach the snippet onto the Header of the Header section of the Page Inspector. Refer to the image above for reference. At this point, your slider is active and ready for previewing. Remember to adjust the size of the slider on the Style Options section, since the default option for the slider is set to None.

Note: RapidWeaver’s auto formatting will sometimes change straight quotation symbols ” into curly ones “. Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you apply “Ignore Formatting” to HTML code it will automatically change the curly quotes to straight quotes.

Page Specific Options

PAGE SPECIFIC: Page Title/Description Width

Page Title/Description width determines the total width of the page title & description. Alternate between the traditional 960px or full width sizes. To omit the page title & description, select “None” (Applies to all pages involving the page title & description).

PAGE SPECIFIC: Presentation Style

Presentation Style allows the user to display their photos, movies, and miscellaneous files in either a gallery or list fashion (Applies to Photo Gallery, Movie Album, and File Share pages).

PAGE SPECIFIC: Lightbox Icons

Adjust the Lightbox Icons to either a light or dark color (Applies to Photo Gallery page).

PAGE SPECIFIC: Movie Preview Size

Adjust the size of the movie preview. Sizes are based on sizing options for Photo Gallery image previews in order to regulate page consistency (Applies to Movie Gallery page).