Description

Pan and Zoom Image is a special Image Object whose image can be dragged to reveal hidden zones and zoomed by the end user double-clicking (hold alt key to zoom out) or pinching with fingers on mobile devices.

You can use it to display a custom map or a panoramic image and let the end user navigate it, it fully supports both image and vector pictures.

Use the standard image crop tools to define the initial position and zoom of the image, then you can selectively enable Panning and Zooming in the selection inspector.

Pan and Zoom Image

Properties

Pan and Zoom Image object supports the same properties of the standard Image Object, plus the ones listed below. To edit properties of a Pan and Zoom Image object, select it and use the selection inspector at the right of your project window.

Enable Pan Enable to allow the end user to drag the image with finger or mouse
Enable Zoom Enable to allow end user zooming by double-clicking (hold alt key to zoom out) or pinching with fingers on a mobile device
Zoom ▹ Max Zoom Maximum zoom reachable by the end user when zooming the image
Zoom ▹ Doubleclick step Defines the amount of zoom to add/subtract when user double-clicks the image

Events

Pan and Zoom Image triggers all Widget Events. To edit event handlers for a Pan and Zoom Image object, select it and use the Interactivity Panel on the right side of the project window.

Actions

Pan and Zoom Image can be used as target of most Generic Actions.

Code

Here’s an example of how a Pan and Zoom Image is exported on the html page:

<div id="obj4" class="SCPageObject SCPanZoomImage">
  <div id="obj4-wdgt" class="SCWidget SCWPanZoom" data-widget="SCWPanZoom"
       data-min-zoom="0.2" data-max-zoom="1" data-zoom-step="0.5" data-disable-zoom="false"
       data-disable-pan="false" data-initial-pan-x="0" data-initial-pan-y="0"
       data-initial-zoom="0.2" unselectable="on"
       style="overflow: hidden; -webkit-user-select: none;">
    <img id="obj4_img" src="../images/oldskool-photography-303977-unsplash.jpg"
         width="8192" height="1942" style="transform: matrix(0.1946447, 0, 0, 0.1946447, -3925.5, -782); -webkit-backface-visibility: hidden; transform-origin: 50% 50%; cursor: move;" />
  </div>
</div>