HD Image

The HD Zoom component lets your users zoom in on an image to see all its details. PandaSuite optimizes your image so that it is displayed with the highest quality any zoom level. Make sure you use high-resolution images for this component.

Click on this component and insert the image of your choice, using a simple drag & drop from Medias. In the Properties window, you can define the following parameters:


  • Edit HD Zoom: this lets you create markers, i.e. define specific zoom zones to which you can match specific actions (see the article Learn about markers(also available by double-clicking on this component)

  • User interaction: allows your user to enjoy all the features of this component (here, zooming in on the interactive image). By default, this option is always checked. If you uncheck this option, your user will only access a simple image.

  • Change source: allows you to replace your image by another one while retaining the properties you previously defined for this component.

  • Default zone: to select the zone displayed when loading the state. If you do not define anything and you go back to this state, it will remain at the zone that was last displayed.

Example: Display an interactive image to zoom in and a button to examine a detail of my image.

  1. Insert the HD Zoom component and drag an high resolution image into it.
  2. In the Properties window, click on EDIT HD ZOOM to create markers:

          -Unzoom the image with the slider and the mouse. In the left-hand window, place the 1st marker with + ADD ZONE.
          -Click on the thumb tack icon to make it the default marker: it will be selected when the image is displayed.
          -Zoom in on the image up to the detail you want to highlight and add the 2nd marker in the same way.

  1. To create the button, insert a square shape, on which you add a “Click here to zoom” text box. 
  2. To create the interactivities: select the square shape and click on the Interactivites icon. Select the trigger Single tap and the action Interact with a component. Select the HD Zoom when you are in the orange mode, associate the Change zone and select the maximum zoom level. 
  3. Your turn!

You now have plenty of fun tools to play with!

Still need help? Contact Us Contact Us