Image Zoomer Component
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
- 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
|Name||When 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 Size||Sets 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.
|Appearance||Sets image to be zoomed.|
|Image||Browse 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 Scaling||Set 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.
|Opacity||Set how opaque the image will display on a scale of 0 to 1, with 0 being totally|