Breadcrumbs

Zoom Container

Adds a Container for zoom functionality, i.e., to zoom concrete (selected by the user) dom element (image, text, block of content, etc.)

Users can configure what content should be zoomed, zoom value, where zoomed content should be displayed, and actions to show zoomed content (click on some button, double click on the content block, etc.)

Prerequisites:

  • The Activator version and Design System (DS) should be in version 2.2.0 or newer.

  • The component is created as customizable and an excluded Component by default. Hence, the component is not found initially in the left panel elements group in Activator Designer.

image-20230106-102123.png


How to make the component available in Activator

The user needs to update the design system (DS) config to use it on the slides.

Steps:

  • remove 'fusion-zoom-container' from excluded Components in fusion.json,

  • image-20230110-112407.png

  • The edited fusion.json will look like this:

  • image-20230106-142515.png


After uploading the new exported DS to Activator, the ‘Zoom Container’ will be visible in the Elements left panel.

image-20230106-142244.png




How to use the Zoom Container:

  1. Take a sample image and reduce the width approx 30%.

    image-20230110-130334.png

  2. Add a Button element on which zoom interaction will be set

    image-20230110-130419.png

  3. Add a Pop-up. Add a Custom Overlay to the Pop-up,

    image-20230110-130609.png
    image-20230110-130702.png

4. Add a ‘Zoom Container’ to the added overlay and adjust the Zoom value. (It is the zoom component where we should display zoomed content and configure zoom value in component properties (1.5 by default))

image-20230110-131036.png


5. In this example, we are setting the zoom action inside a pop-up which is the most common use case of the zoomed elements (generally, in e-detailers, zoomed components are used inside pop-ups/state containers).

So there will be two interactions from this 'Zoom' button. First, the actions to apply the state pop-up.

image-20230110-131923.png


The second is to add the action 'Zoom content' where the user configures elements for zoom, zoom-container, action, and action target. In this example, it is inside the pop-up.

image-20230110-132055.png
image-20230110-132259.png
image-20230110-132325.png


6. After creating the interactions, zoom functionality is visible in preview mode. Clicking on the ‘Zoom’ button Zooms the elements set in the interaction to the adjuster zoom values.


image-20230110-133326.png
image-20230110-133338.png


In Situ Example of the Zoom Container Component

Animation.gif
Example