The Swipeable Gallery component
Choosing the right gallery
Google Web Designer has three different gallery components:
- 360° Gallery - The 360° Gallery is optimized to show an object on all sides, swiping back and forth to turn the object around. The 360° Gallery has limited options, and cannot show groups or navigation elements.
- Swipeable Gallery - The Swipeable Gallery gives you a simple, flat look, and lets you move through images or groups either vertically or horizontally.
- Carousel Gallery - The Carousel Gallery is similar to the Swipeable Gallery, but gives neighboring images a three-dimensional look, as if they were on a rotating display.
To use the Swipeable Gallery:
Open the Components panel, then the Galleries folder.
Drag the Swipeable Gallery component to the stage.
In the Swipeable Gallery properties section of the Properties panel, name the component.
Add either a set of images or a set of groups.
- To add images, use one of the following methods:
In the Swipeable Gallery properties section of the Properties panel, add URLs for your images in the Images field, separated by commas.
In the Swipeable Gallery properties section of the Properties panel, click the "Select Gallery images" button. Click the Choose files button to browse for image files, or drag files directly to the dialog box.
To add groups to the gallery:
- In the Swipeable Gallery properties section of the Properties panel, add a list of group names in the Groups field, separated by commas.
- To add images, use one of the following methods:
Optionally, adjust the component properties (described below).
Using groups in the Swipeable Gallery
The Swipeable Gallery can hold either a set of images or a set of groups. Using groups lets you use assets that aren't images (such as a set of videos) or a collection of several assets in each frame of the gallery (such as images with captions).
When you're using videos (or other interactive types of assets), you need to select Disable swipe in the advanced properties dialog. This will let the user interact with video controls. Then use the Gallery Navigation component to let the user move between gallery frames.
To reorder or remove images in the gallery:
- In the Swipeable Gallery properties section of the Properties pane, click the "Select Gallery images" button .
- Drag an image to its new position to reorder it, or hover over an image and click the delete icon to remove the image from the gallery.
- Click OK.
|Name||Sets the Swipeable Gallery name.|
|Images||Lets you select the images for use in the gallery.|
|Groups||A comma-delimited list of groups to use in the gallery.|
|Transition||The time (in milliseconds) for the transition between images.|
|Start frame||The number of the image you want to display initially.|
|Show frames||The number of frames that are shown in the gallery at one time.|
|Swipe frames||The number of frames that advance on each swipe.|
|Autoplay||When checked, automatically plays through the images in the gallery.|
|Include navigation||When checked, includes navigation icons for moving through the gallery.|
|Use thumbnails||When checked with "Include navigation", shows thumbnail images for navigation rather than icons.|
|Highlight color||Sets the highlight color for the navigation image.|
|Scaling||Determines how various sized images are displayed within the fixed frame size:
|Direction||Determines whether the images move horizontally or vertically in the gallery.|
To show the advanced properties, click the expand icon for "Advanced properties" in the component properties pane.
|Frame offset||The distance between images.|
|Frame width||The width (in pixels) of the image frame within the gallery.|
|Frame height||The height (in pixels) of the image frame within the gallery.|
|Autoplay duration||The duration (in milliseconds) that the gallery plays, from first to last frame. This time is split evenly between each image, unless a separate Autoplay step interval is chosen.|
|Autoplay step interval||The duration (in milliseconds) that each image is shown when Autoplay is enabled. Images are played with this duration until the total Autoplay duration is reached, cycling through the images multiple times if necessary.|
|Exit URLs||A list of URLs, separated by commas, that corresponds to each frame in the gallery.|
|Disable swipe||A checkbox that lets you disable the swipe navigation for the gallery. This lets the user interact with elements in the frame without their interaction changing the frame accidentally. When this is checked, you can use either the "Include navigation" property or the Gallery Navigation component for changing frames.|
|Pause media when leaving frame||When checked, pauses audio or video that's playing in the current frame whenever the frame is changed (to avoid having unwanted content playing in the background).|
|Resume media when entering frame||When checked, starts any paused audio or video in the upcoming frame whenever the frame is changed (to avoid having unwanted content playing in the background).|
Events can be used to trigger other actions in your ad. The Swipeable Gallery component sends the following events:
|First interaction||Sent when the user first interacts with the gallery.|
|All frames viewed||Sent when every frame of the gallery has been shown at least once.|
|Images loaded||Sent when all the frames of the gallery have been loaded.|
|Autoplay ended||Sent when the autoplay has ended for any reason.|
|Frame shown||Sent when each new frame is completely shown.|
|Frame activated||Sent when a frame change is started.|
|Frame autoplayed||Sent when a frame is automatically shown during autoplay.|
|Frame tap||Sent when the frame is clicked.|
|Left end||Sent when the gallery reaches its left end after swiping.|
|Right end||Sent when the gallery reaches its right end after swiping.|
|Mouse over a frame||Sent when the mouse enters the frame.|
|Mouse out of a frame||Sent when the mouse leaves the frame.|
The following Swipeable Gallery component actions can be triggered by other events:
|Go to frame||
Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.