Image Zoomer

Displays a large image that can be panned and zoomed.

The image zoomer overcomes the problem of not having enough screen space for lots of detail. Use this
component in conjunction with the ‘Zoom image zoomer’ action, to zoom and pan around large content on a
small device. For example: a brochure intended for traditional print could be reused within the Project.
Zoom in and out controls can be added by creating buttons, for example, and then adding the ‘Zoom Image
Zoomer’ actions when the buttons are pressed.


Using the Image Zoomer

  • The Image Zoomer Component is very useful when you have an image that covers a large area with a lot
    of content and you want users to be able to view it on a small device like a phone. The type of
    asset might be a complex diagram, a large photograph or detailed piece of art work.
  • The Image Zoomer uses the assets you have created and stored in the Project’s ‘Resource
    Folder’/’images’ folder.
  • Browse the ‘images’ folder and insert the asset into the ‘images’ file panel.
  • On a touch device users will be able to pinch and zoom around the image or with a mouse, users can
    likewise pan around and look at the content in detail.

Properties for Image Zoomer Component

NameWhen components are placed on a page they appear highlighted blue in the scene tree and can
be renamed by double clicking in this panel and typing the new name. Components can also be
set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and SizeSets position and size. As long as measurements are maintained as percentages it deals
automatically with dynamic layout and resizing for different devices and orientations. You
can use millimeters to control aspects of size like width or height on order to maintain a
set size across devices.
AppearanceSets image to be zoomed.
ImageBrowse your Image folder using the Folder icon. The icon opens the Image folder and lets you
select the item you want zoomable.You can insert new images/graphics as .png or.jpg files
into the Image folder using copy and paste. Note: to see the new image/s you have added, you
will need to press the Refresh key bottom left of the Image folder button.
Default ScalingSet the dropdown to Fit or Fill mode. Fit retains the whole image to scale on the page and
Fill will fill the whole space you have set for the image.
OpacitySet how opaque the image will display on a scale of 0 to 1, with 0 being totally
translucent.