Access Keys:
Skip to content (Access Key - 0)

Adding a zoomable picture

A zoomable picture initially displays in a box, but takes over the entire screen when double-tapped. You can use this feature to add an animated pan-and-zoom effect to an image, or allow it to be zoomed and panned directly in its box.

App Studio issues support interactive pictures in PNG, JPEG, GIF, TIFF, and EPS formats. To add an interactive picture to an App Studio issue:

  1. Select the picture box that contains the picture you want to make zoomable.
  2. In the HTML5 palette, click Picture Zoom .

    Picture zoom controls
  3. Optionally, enter a name for the zoomable picture in the Name field. This name displays in the Interactive Objects area in the bottom of the palette.
  4. If you want the zoomable picture to be initially invisible, check Initially Hidden .
  5. To allow the user to switch back and forth between cropped view and fullscreen view by double-tapping the picture, check Allow Fullscreen .
  6. To allow the user to zoom in and out with pinch gestures, check Allow Pinch Zoom .
  7. To allow the user to pan around in the picture with one finger, check Allow Panning .
  8. To make the picture pan and/or zoom at the beginning of its display, check Animate Pan and Zoom .
  • Duration : Lets you control how long the pan/zoom lasts. At the end of this duration, the slide stops and stays in its final position until the next slide is displayed.
  • Start and Stop : These buttons allow you to set the beginning and ending crop. Click Start and scale/position the picture for the initial position, then click Stop and scale/position the image for the final position.
  1. To finish configuring the zoomable picture, click a different object or a blank part of the layout.

Adaptavist Theme Builder (4.2.1) Powered by Atlassian Confluence 3.5, the Enterprise Wiki