Overview

The OnClick Zoom Image Reactive O11 is a versatile OutSystems Web Block that enables a zoom effect on images contained within a PlaceholderImage. When an image is clicked, a zoom in/out effect is triggered based on a customizable scale. The component is designed to prevent the default browser action on image click, ensuring a smooth and responsive zoom experience.

Key Features

• Zoom on Click: Clicking on an image applies or removes a zoom effect.
• Customizable Zoom Level: The zoom effect can be adjusted using the Scale parameter.
• Prevention of Default Browser Action: Clicking an image won't trigger the default behavior, like opening the image in a new tab.

Parameters

Scale

• Type: Integer
• Description: Defines the zoom level applied to the images when clicked. A higher value results in a greater zoom, while a lower value offers less magnification.
• Default Value: 1
• Example: A Scale value of 2 will double the size of the image when zoomed.

Usage

1. Add the Web Block: Drag and drop the ZoomImage Web Block into your page.
2. Set the Scale Parameter: Define the desired zoom level by setting the Scale parameter.
3. Place Images within the PlaceholderImage: Insert your images within the designated PlaceholderImage inside the Web Block.
4. Zoom Functionality: On user interaction (click), the zoom effect will apply or remove based on the Scale.

How It Works

The component attaches a click event to all images within the PlaceholderImage container. When clicked, the image toggles between zoomed in and its original state. The zoom level is determined by the Scale parameter, offering flexible control over the zoom effect.

Example

If you set the Scale parameter to 3, clicking an image will enlarge it by three times its original size. Clicking the image again will restore it to its normal size.