Articles in this section

See more

Slideshow: An Overview

Avatar
clickbooq support
  • Updated
Follow

Design_Editor___slideshow.png

SLIDESHOW

In the Slideshow gallery style, your gallery images are displayed one at a time. Visitors can manually browse through your images by clicking previous or next buttons. Or, if Autoplay is enabled, visitors can click the “Play” icon in the bottom toolbar to move through the images automatically.

Thumbnails

For slideshow galleries, you can choose to display a thumbnail strip of images. Note: For galleries using the Grid style, these options are set in the Grid Options.

To set the options for your Thumbnail strip:

• Set the visibility of Thumbnails to Hide/Reveal on rollover, Always visible, or Never visible.

• Set the position of your Thumbnails, in relation to your gallery, to the top, right, bottom, or left.

• In Thumbnail Options:

  • Use the slider to adjust the thumbnail width.

  • Use the slider to adjust the thumbnail height.

  • Image cropping of thumbnail images can be set to Fill (images are cropped to the width of the thumbnail strip) or Fit (images are scaled down to fit and the Image Background Color will fill the surrounding white space).

  • Use the slider to adjust the Image spacing. This will adjust the amount of space between thumbnails.

  • Use the color picker to set the Image Background color, which will fill any surrounding white space around thumbnail images.

  • Use the slider to adjust the Panel spacing. This will adjust the amount of space between the thumbnail strip panel and the gallery image.

Slide Image Cropping

Image cropping of slideshow images can be set to Fill (images are cropped to the fill the entire window) or Fit (images are scaled down to fit and there may be white space along the sides).

Slideshow Controls

Enabling Slideshow adds a Play icon below your image, in the image Toolbar. Clicking the Play icon will launch your gallery in slideshow mode (automatically switches to the next image in the gallery).

 • Delay: use the slider to set the duration each image will be displayed before the next transition.

Toolbar

Here you can set the options for your Toolbar, which when enabled, will appear below your image gallery. The Toolbar displays icons that allow visitors to control the playback of the images, show the info panel to view titles and captions, and view thumbnails.

To set the options for your Toolbar:

• Turn on and off visibility for the Toolbar.

• Select the color of your Toolbar. The color picker lets you select a color by choosing from a color Iield and spectrum or entering the RGB color values. You can also enter a hexadecimal color value (ie #999999).

• Use the slider to adjust the size of your Toolbar.

• Choose the placement of your Toolbar on your site to align left, center or right.

Transition

Control the transition effect between images as visitors click the “next” and “previous” buttons or as images automatically play during slideshow mode.

• Choose one of the transition types: crossfade, popfade, or horizontal slider.

• Use the slider to adjust the speed of the transition effect.

Info Panel

The Info Panel displays titles and captions for your images. To set the options for your Info Panel:

• Set the visibility of the Info panel to Hide/Reveal on rollover, Always visible, or Never visible.

• Choose the position of your Info Panel on your site to slide in from the top, right, bottom, or left.

• For layout, select Overlay for your info panel to display on top of your image or Push, which will slide your image over to make room for the info panel.

• In Text Options:

     • Select the Font family from the drop down menu.

     • Adjust the font size with the slider.

     • Select the font colors for your text. The color picker lets you select a color by choosing from a color Iield and spectrum or entering the RGB color values. You can also enter a hexadecimal color value (ie #999999).

     • Within Text Options are more advanced customization options for your text: Text Transform, Text Decoration, Letter Spacing, and Line Height.

• Select the color for your Info Panel background color. You can also set the opacity of the color by using the bottom slider or inputting a fourth number in the RGBA Iield. Choose a color and opacity combination that works with your title and caption font color. Note: If you have set your Info Panel to Overlay, you may wish to adjust the opacity so more of your image can show through.

Arrows

Arrows will appear on top of your single image view. This allows your visitors to browse your images by clicking the next and previous arrows.

To set the options for your Arrows:

• Set visibility to On or Off.

• Select an Arrow Style: Caret, Caret Thin, Plus and Minus, Plus and Minus Thin, or Solid Arrows.

• Select an image behavior for when to show arrows: Always Visible, Hover, or Follow.

• Use the slider to adjust the size of your arrows.

• Select the color for your arrows using the color picker. You can also set the opacity of the color by using the bottom slider or inputting a fourth number in the RGBA Iield.

• Select a Background style: None, Round, or Square.

• Set a Background Color and opacity.

Comments

0 comments

Article is closed for comments.