You can display an interactive image gallery in your ad using the Photo Gallery widget. Viewers can click, tap, or swipe to rotate through a looped set of images.

The Photo Gallery widget requires at least three images to display. If you want to display an image gallery with fewer than three images, you can build the same experience using panels. For background information and steps, see Adding layers to creatives with panels.

Before you start

• Create an In-Banner Video creative, an In-Stream Video creative, or a Rich Media creative. For steps, see Assembling a creative from a template or Assembling a creative from scratch.
• Prepare at least three images that you want to display. For information about the types of images that you can upload, see Supported file formats.
• If you want to display thumbnail images that are different from your main images, prepare the images that you want to display. Each thumbnail image is cropped to a square.
• If you want to display custom navigation arrows for the main image display or the thumbnail area, create the images to display. You can use the following images for the arrows, depending on how the viewer is interacting with the arrows:
  • A left or right arrow that displays until the viewer interacts with the arrow (the Up state).
  • A left or right arrow that displays when the viewer clicks the arrow (the Down state) 

To add a Photo Gallery widget to a creative

1. Navigate to the Division, Account, and Campaign of the creative.
2. Click the Campaign Management tab, then click the Creatives tab.
3. Click Edit for the creative. The Mixpo Studio opens.
4. Add the widget to your creative:
   1. Select the canvas tab that you want to add the widget to.
   2. Click the Overlays tab, then click Widget.
   3. Click Our stock library.
   4. Select the Photo Gallery widget, then click Add media. The widget is added to your creative.
5. Select the Photo Gallery widget. In the settings area, new widget options appear.
6. In the Overlay name field, type a name for the widget. The name is displayed in reports about the widget.
7. From the Navigation type drop-down list, select how you want viewers to navigate through the photo gallery:
   • Arrows/swipe only: Arrows are displayed on the sides of each photo. Viewers navigate through the gallery by clicking the arrows or swiping the images.
   • Thumbnails: A thumbnail of each photo is displayed below the gallery. Viewers navigate through the gallery by clicking or tapping the thumbnails.
   • Dots: A dot for each photo is displayed below the gallery. Viewers navigate through the gallery by clicking or tapping the dot.
8. By default, the Photo Gallery widget displays navigation arrows on the side of each photo. You can customize the arrows or hide the arrows. Select from the following:
   • To display custom arrows, do the following:
     Warning: Once you add arrow images, you cannot remove them. If you want to use the default arrows, add a new Photo Gallery widget.
     1. Select the Show arrows check box.
     2. For Left arrow (up),  Right arrow (up), upload arrows that display before the viewer interacts with them (the Up state).
     3. For Left arrow (down) and Right arrow (down), upload arrows that display when the viewer clicks them (the Down state).
   • To adjust the size and color of the default arrows select Arrow Color and/or Arrow size.    
   • To hide the arrows, clear the Show arrows check box.
9. If you selected the Thumbnails navigation type, do the following:
   1. Select a Thumbnail border color to outline the active image.
   2. Select the Thumbnail size.
   3. If there are more thumbnails than can display in the area of the widget, by default, navigation arrows are displayed on the sides of the thumbnail area to allow viewers to scroll through them. You can customize or hide the arrows. Select from the following:
      • To display custom arrows, select the Show arrows check box, then upload arrows that display before the viewer interacts with them (the Up state) and when the viewer clicks them (the Down state).
        Warning: Once you add arrow images, you cannot remove them. If you want to use the default arrows, add a new Photo Gallery widget.
      • To hide the arrows, clear the Show arrows check box.
10. If you selected the Dots navigation type, do the following:
    1. For the Color, select the color of the navigation dots.
    2. For the Active color, select the color that you want to display the selected dot.
    3. Choose the Dot size.
11. Select the animation option: (Fade, Slide, Cube, Flip, Cards, no animation)
    1. Set animation direction (Horizontal or Vertical)  
    2. Speed (Duration of transitions between slides)
    3. Distance between slides in px
    4. Slides per group skip. (Note: this shows multiple images in each group). 
12. To select your images, do the following:
    1. In the Photo area, click Add images. Click Campaign media, then click Upload media to Library. Upload the first image that you want to display.
    2. Select the image, then click Add media.
    3. In the Clickthrough URL field, type the address of the website that you want viewers to be taken to when they click the image.
    4. If you selected the Thumbnail navigation type, by default, the thumbnail image matches the main image. To display a different thumbnail image, click Add images, then upload the image that you want to display.
    5. Click + (the plus sign). Repeat the steps above to add at least three images to your gallery.
13. To change the size of the widget, click and drag the sizing handles on the borders of the widget.
    Note: To make sure that the live ad is optimized for mobile devices, the widget should be at least 44 × 44 pixels, so that it is big enough for viewers to tap. If you added the widget to the Timeline Canvas tab, leave at least 44 pixels between the widget and the bottom of the creative, so that viewers can tap the video player controls.
14. You can automatically play a slideshow of your images. Do the following:
    1. Select the Do slideshow check box.
    2. In the Delay field, type how many seconds you want each image to be displayed.
    3. In the Number of loops field, type how many times you want the slideshow to repeat. Alternatively, to repeat the slideshow indefinitely, select Infinite looping.
15. If you added the widget to the Timeline Canvas tab, specify how you want the widget to appear in your video sequence. Do the following:
    1. ​From the Enter and Exit drop-down lists, select the entrance and exit animation effects.
    2. In the Duration field, type the number of seconds that you want the widget to appear for.
       Tip: If you are playing a slideshow, allow enough time for at least one loop to complete.
    3. In the Start time field, type the number of seconds into the video that you want the widget to appear.
    Tip: You can also drag the widget on the visual timeline to adjust the timing. For steps, see Adjusting the timing of video content using the visual timeline.
16. Click Save.
17. To test that the creative appears the way that you want it to, return to the Mixpo Platform and click Preview.