You can display a large image in a small area and allow the user to pan and zoom the image within that area.

  1. Place a JPEG or PNG image.

  2. Using the Selection tool, drag the a selection handle to crop the frame without resizing the image. Make the frame the size of the view area. Position the image within the frame to determine the initial view area.

    Make sure that the container frame is smaller than the image. If the width or height of the frame and image are the same size, the object is treated as scrollable content.

    Note:

    To add a poster to the Pan and Zoom overlay, create a frame the same dimensions as the image pan, and place it over the Pan and Zoom overlay. When the user taps the poster, the image pan is activated and hides the poster. When the user double-taps the image pan, the poster is displayed again.

  3. To change the initial view magnification, use the Direct Selection tool to select the image (not the frame), and scale the image.

    You can change the image size to 100% or lower. The maximum scale is 100%.

  4. Select the image frame, and open the Overlays/Folio Overlays panel. Click the Pan & Zoom tab, and then select On.

To make an entire page of a DPS article pinch and zoom, create an article with PDF image format. See Enabling pinch and zoom for articles.

Pan and zoom guidance

Note the following:

  • Currently, the view area must be rectangular.

  • For best results, use JPEG images.

  • If you create a pan-and-zoom overlay that is larger than 2000x2000-pixels in 72 ppi, test it thoroughly on the mobile device. Large images increase the file size and can cause memory problems on mobile devices.

  • As a general rule, make sure that the image has the exact dimensions you want to use. For example, to pan a 1024-by-1024 pixel image within a 200-by-200 pixel view area, create a 1024-by-1024 image in 72 ppi. However, if you are using 1024x768 source documents in a 2048x1536 folio, using 72 ppi images can result in a different initial view experiences on different iPad models. To avoid this, create a high-resolution version of the image in an HD subfolder. See Creating multi-definition PDF articles for iOS devices.

  • The Pan and Zoom feature is not designed to work with transparent images. When a page with an image pan is loaded, the poster appears, and the actual overlay is invisible until it is tapped. When users double-tap the overlay, it disappears and the poster is displayed. If the image pan contains transparency, the poster shows through and appears to be a duplicate image. One workaround is to create a two-state MSO in which the poster is a button on the first state that links to the pan and zoom image on the second state.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy