# Zoomable

> The Zoomable component enhances interactivity by allowing users to focus on specific details. Utilize this component for applications like interactive maps, product catalogs, and games, offering enriched user engagement through zoomable content and customizable properties.

https://docs.pandasuite.com/essentials/components/zoomable/

**The Zoomable component allows any content to be zoomable. It offers an enriched interaction by allowing users to focus on specific details and interact with different levels of zoom.**

Here are several use cases for the Zoomable component:

- **A tourist map of a city**: users can zoom in on different neighborhoods to discover points of interest, such as museums, restaurants, or parks. When a user zooms in on a point of interest, a pop-up window appears, offering information, photos, and even links for more details.
- **Interactive product catalog**: customers can zoom in on products to see the details, textures, and features of each item. When zooming in on a specific product, additional options are displayed, such as color selection, size, or adding to the cart.
- **A "Look and Find" game**: users must zoom into the image to find objects or characters hidden within. When the object appears, it is automatically unlocked on the list of items to find.

[Video: Look and Find game built with the Zoomable component: zoom into an illustration to find the hidden characters](https://www.youtube.com/embed/j4FP4NS5NFk?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

> **Info**
>
> What is the difference with HD Image? Unlike the HD Image component, the
> Zoomable component offers many possibilities for interaction with zoomable
> content thanks to position and visibility markers. The HD Image component
> allows for better display and zooming into an image in high detail.

## Properties of the Zoomable Component

Select the Zoomable component to access its properties:

- **Minimum / maximum zoom**: set the zoom limits to control how far users can zoom in or out.
- **Zoom focus point**: this property is useful when users do not interact with the zoomable content. It is a point that goes from 0, 0 (top left point) to 1.1 (bottom right). It is relative to the content displayed at that time.
- **User zoom**: choose whether users can freely zoom in the content.
- **User scrolling**: choose whether users can move freely in the content.
- **Object exclusion**: exclude certain objects from zoom so they maintain a constant size and position.

[Image: Zoomable component properties: maximum zoom 6, minimum zoom 1, zoom focus point 0.5 / 0.5, user zoom and user scrolling enabled]

## Editing and Creating Markers

To edit the zoomable content, double-click on the component area. On the left, you can customize the controls to facilitate navigation, by making the **Slider** or the **Minimap** appear.

Use markers to identify specific zoom positions and areas. You have the choice between **creating a zoom marker** or **a visibility marker**.

To add a marker, click on the **+** button in the dedicated menu. By default, a zoom marker is created. If you want to create a visibility marker, click on the dropdown arrow. Markers are automatically created based on where you are located. You can modify these properties on the right panel.

The properties of zoom markers are:

- the zoom level
- the option of automatic centering

The properties of visibility markers are:

- the target
- the level of visibility (in percentage)
- the type: **Entering** or **Exiting**

[Image: Zoomable in edit mode: marker Character 5 is selected, with its properties on the right: zoom 4.6 and automatic centering enabled]

## Triggering an Action Based on a Zoom Position

You can configure actions that are triggered at specific zoom levels. For example, display additional information or start an animation when the user reaches a certain level of zoom.

Here in the example below, the goal is to unlock the object in the list of items to find.

[Image: Zoomable actions: reaching each Character zoom marker brings the menu to the foreground and sets that character to the Found state]

[Template: Look and Find Game](https://pandasuite.com/dashboard/use-template/qBjQSIwB5IBMJWwgdpE4)