This component is not supported for AMPHTML ads , video ads , or image ads .
Choosing the right gallery
Google Web Designer has four different gallery components:
- The 360° Gallery shows images of different sides of an object, letting you swipe back and forth to rotate the object. The 360° Gallery doesn't show groups or navigation elements.
- The Swipeable Gallery has a simple, flat look, and lets you swipe through images or groups either vertically or horizontally.
- 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.
- The Transition Gallery offers a range of animation effects while switching from one image to the next.
To use the Swipeable Gallery:
-
Open the Componentspanel, then the Galleriesfolder.
-
Drag the Swipeable Gallery
component to the stage.
-
In the Swipeable Gallery properties section of the Propertiespanel, name the component.
-
Add either a set of images or a set of groups . Use groups to display elements other than images, or to display multiple elements in a single frame.
- To add images, use one of the following methods:
-
In the Swipeable Gallery properties section of the Propertiespanel, add URLs for your images in the Imagesfield, separated by commas.
-
In the Swipeable Gallery properties section of the Propertiespanel, click the Select Gallery images
button. Click the Choose filesbutton 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 Propertiespanel, add a list of group names in the Groupsfield, 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 contain either a set of images or a set of groups. Using groups lets you use assets that aren't images (such as videos) or multiple assets in a single frame of the gallery (such as images with text captions).
When you're using videos or other interactive assets, select Disable swipein the Properties panel. This lets the user interact with the video controls. You can use the Gallery Navigation component to let the user move between gallery frames.
To create a gallery that displays a mix of images and groups, convert the images you want to use into groups first.
You can also display multiple dynamic elements in the gallery by using groups.
To reorder or remove images in the gallery:
- In the Swipeable Gallery properties section of the Propertiespane, click the Select Gallery images
- Drag an image to its new position to reorder it, or hover over an image and click the Deletebutton to remove the image from the gallery.
- Click OK.
Properties
- Resize image to fit- Proportionally resizes the image as necessary to fit the frame without cropping. Padding will be added if the aspect ratio of the image and the frame are different.
- Crop image to fill- Resizes the image to completely fill the frame, cropping the image if necessary when the aspect ratio of the frame and the image are different.
- None- The image is displayed at its original size, centered in the frame. If the image is smaller than the frame, the extra space will be padded with transparency. If it's larger, the image will be cropped.
- Stretch image to fill- Resizes and stretches image as necessary to match the dimensions of the frame without cropping.
Advanced properties
To show the advanced properties, click the expand iconfor Advanced propertiesin the component properties pane.
| Advanced property | Description |
|---|---|
| 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 intervalis 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. Can be bound to dynamic data . |
| 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 when 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 that frame becomes active. |
Events and actions
Events sent by the Swipeable Gallery componentYou can trigger other actions based on the following Swipeable Gallery component events:
| Event | Description |
|---|---|
| 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. |
| Track start | Sent when the mouse or touch drag begins. |
| Track | The component registers the X and Y location data associated with the mouse or touch drag. |
| Track end | Sent when the mouse or touch drag ends. |
To select one of these events in the Eventdialog, set the Swipeable Gallery component as the target.
The following Swipeable Gallery component actions can be triggered in response to other events:
- Frame number
- Animate- " none " or " slide "
- Rotation time- time in milliseconds
- Direction- " forwards " or " backwards "
When you select one of these actions in the Eventdialog, set the Swipeable Gallery component as the receiver.
Learn how to configure events .
Preview
On the stage, the Swipeable Gallery displays just the start frame to give you an idea of how the component will appear. To see the fully rendered component in action, preview the document in your preferred browser by clicking the Previewbutton in the upper right corner.
