Overview
The Gallery Widget displays a gallery of photos on your campaign. The photos come from your Media Manager and are displayed one at a time with Next/Previous buttons to navigate through the images. You can configure each photo to be clickable, and set a different destination URL for each photo.
Setup
- Click Add New Item to open the Media Selector.
- Click Select Image to open the Image Selector (required).
- Choose an existing image, or add a new image. To add a new image, drag files onto Media Library to upload, click Select Files to upload or click Enter URL. Click Select to choose the image you want to display.
- Enter a Caption and/or a URL (optional).
- Click Save Item to save the image.
- Repeat steps 1-5 to add additional images.
Note: The Image Selector only allows one upload at a time. To upload multiple images at once, select the Media Manager from the main menu and upload your images there.
Each image you add to the Gallery Widget is added to a list in the Edit Widget dialog. You can edit or delete images in the gallery using the icons to the right, and rearrange the order of images by clicking dragging the handle at the left up or down.
Options
Start Up
- Show Images as Thumbnails: Displays a thumbnail for each image. When user clicks/taps a thumbnail, the image is zoomed using one of these modes:
- Inline: When campaign is viewed in an iFrame (e.g. the campaign is embedded to a website or published to a Facebook Page).
- Full Screen: When campaign is not inside an iFrame (e.g. a web-published campaign).
- Inline: When campaign is viewed in an iFrame (e.g. the campaign is embedded to a website or published to a Facebook Page).
- Display One Image at a Time (Inline View): Displays only the first image upon campaign load. The user can click/swipe to see other images in the gallery.
Shuffle images
Randomly shuffles the images each time the campaign loads. This does not permanently re-sort your images, so you can turn this off to return to your original sort order.
Open "More Info" links in same window
If you enter a URL for an image, we’ll display a More Info link with the image. By default, the link will open a new browser window. Check Open "More Info" links in same window to open links in the same browser window.
Make image clickable
In addition to the More Info link, this allows the user to click the image to go to the destination URL (if any). If you want to also hide the text link, add the following to your Custom CSS:
.ss_gallery_content .widget_item p a{
display:none;
}
Fancy Gallery -- Not available on campaigns using the Style Panel
Use Fancy Gallery
Check the Use Fancy Gallery box to enable slideshow/animation functions. With Fancy Gallery enabled:
- Users can hover their mouse over the gallery and a Play/Pause button will appear. Clicking that button starts/stops the slideshow.
- Images are automatically scaled to fit the available height and width (when Fancy Gallery is turned off, images are shown full-size). This is especially useful when you have images of different sizes because it prevents the campaign height from changing when navigating the gallery.
- The image transitions are animated with configuration options for controlling the animation.
Fancy Gallery has a number of additional configuration options:
Automatically Start Slideshow When Campaign Loads
Check the Automatically Start Slideshow When Campaign Loads box to start the slideshow as soon as the campaign loads, without any user interaction.
Layout
Use the Layout drop-down menu to select how ShortStack displays the Fancy Gallery.
- Default: The main image appears at the top, with arrows below it for manually moving between images. Below that are thumbnails for jumping to a particular photo. If there are more thumbnails than will fit horizontally, scroll buttons appear upon mousing over the right or left side of the row of thumbnails.
- Minimal: Only one image is displayed at a time, with arrows that appear upon mouse over for manually moving between images. The Minimal layout is recommended for optimal viewing on mobile devices.
As with all other widgets, layouts can be changed using CSS.
Fill Image Area
This option only has a visible effect when the aspect ratio (width/height) of the image is different than the aspect ratio of the container.
When this option is unchecked, images are scaled so that the entire image fits within the container (the container size depends on the Layout, Height, and Width settings). If we applied a black background color to the container, you would see black bars on either side of the image, or above and below the image.
When this option is checked, the image is scaled so that the entire container is filled. This will cause either the sides or the top/bottom edges of the image to be cut off. You might prefer this when displaying photos that don’t have a border.
Maximum Image Zoom
If the original image size is smaller than the space allocated, this setting determines whether or not the image is scaled larger (which will degrade the image quality) to fit the space. Leave it set to 1X to preserve original image size and quality.
Aspect Ratio, Manual Width, Manual Height
The Aspect Ratio determines the ratio of the width to the height and defaults to 4/3 (1.33) if left blank. For best results (especially for mobile devices), leave the Manual Width and Height blank.
If enter a Manual Width and Manual Height, the Aspect Ratio is ignored.
Note that Manual Height includes the manual navigation controls and thumbnails in the Default layout.
Delay Between Slides
Controls the speed of the slideshow. Experiment with this setting to see what works best for your situation.
Animation Type
Determines whether to use a fade or slide animation when changing images.
Animation Style (Slide or Fade only)
Also called easing, this determines the animation style during the image transition. As with the Delay setting, experiment to see which style you prefer.
Animation Length (Slide or Fade only)
Determines the duration of the animation effect.
Animation Direction (Slide only)
Determines the direction for the slide effect. Auto will slide left or right, depending on whether the user is going forward or backwards. Left or Right causes the images to slide in that direction. Top or Bottom causes the new image to appear from the top or bottom.