Adding a jQuery Carousel

From Documentation
Revision as of 23:05, 13 January 2015 by Adam (Talk | contribs) (Adding a Carousel)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Adding a jQuery Carousel

Using the jQuery Carousel tool, you can enable your visitors to control a list of images in horizontal or vertical order. The items can be scrolled back and forth with a sliding animation. Your images will look great on the Web, and your site visitors will be blown away by your sharp looking gallery.

About the Carousel

The jQuery Carousel tool is a great way to show off photos on your website. Controls are available to set orientation, visibility, scroll count, wrap, Matte, Captions and Navigation controls. Using the jQuery Carousel, you will be able to create astonishing slides, fully customizable in order to fit your page design.

Adding a Carousel

Using the jQuery Carousel component, you can create a stunning collection of images in just a few minutes.

The images you choose to display in your Carousel are organized in the Asset Properties tab of the Carousel Properties Palette. A default layout is created when the Carousel is dropped on the page. This layout does not contain images, the user can add images and set options related to the format of Carousel.

To add a Carousel:

  1. In Page view, display the page where you want to place the jQuery Carousel object.
  2. Choose the Carousel Object tool from the image flyout located in the standard toolbox and draw a box on the page layout where you want the Carousel to appear. The Photos dialog appears.
  3. Click the Asset Properties tab of the Carousel Properties Palette.
  4. Click the plus (+) button located at the bottom left of the Carousel Properties dialog, navigate to the folder containing the photos you want to add to the Carousel.

Previews of the images are displayed on the top right part of the dialog.

To select the photos for the Carousel:

  1. Click a single photo to select it.
  2. Press Shift+Click or Ctrl+Click to select multiple photos.
  3. Press Ctrl+A to select all photos in the folder.
  4. Click the Open button.
  5. The photos you select are listed in the Assets window pane.
  6. Select the photos in the Album pane to preview the image in the Carousel.

The quality settings are based on the application settings for auto-generated image output in the site. See Setting Application Options for more details.

You can reorder your images using the up and down buttons located in the bottom right of the Carousel Properties dialog.

Configuring the Carousel

NetObjects Fusion makes it easy for you to give your Carousel a professionally polished look.

For each Carousel that you create, you have a predefined set of options. The options may be edited from the General pane.

  • Orientation. Specifies whether the Carousel scrolls horizontally or vertically.
  • Visible. The number of images visible with each scroll.
  • Scroll by. The number of images to scroll by.
  • Autoscroll. Specifies how many seconds to periodically autoscroll the content.
  • Wrap. Specifies whether to wrap at the first or last image, or both and jump back to the start or end.
  • Matte. Specifies the background color used for images that do not fill the entire slide.
  • Captions. Specifies whether Captions are on:
  • Always
  • Off
  • On Hover
  • Navigation. Specifies if the navigation buttons appear:
  • Always
  • Off
  • On Hover
  • Fit contents to slide. Specifies if your images will be intelligently expanded to fill the slide dimensions.