Properties

transition-duration: 1000

Defines the speed of the animation of positioning and transforming.

Zoom State: {{ zoomstate() }}

limit-zoom: 2

Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size.

Zoom State: {{ zoomstate() }}

minScale: 1

Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan.

Zoom State: {{ zoomstate() }}

auto-zoom-out: true

Automatic restoration of the original size of an image after its zooming in by two fingers.

Zoom State: {{ zoomstate() }}

double-tap: false

Zooming in and zooming out of an image, depending on its current condition, with double tap.

Zoom State: {{ zoomstate() }}

double-tap-scale: 4

Double tap scaling factor.

Zoom State: {{ zoomstate() }}

disabled: true

Zoom State: {{ zoomstate() }}

disablePan: true

Turn off panning with one finger.

Zoom State: {{ zoomstate() }}

minPanScale: 2

Minimum zoom at which panning is enabled.

Zoom State: {{ zoomstate() }}

overflow: 'visible'

hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box.

Zoom State: {{ zoomstate() }}

disableZoomControl: 'disable'

Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices.

Zoom State: {{ zoomstate() }}

zoomControlScale: 2

Zoom factor when using zoom controls.

Zoom State: {{ zoomstate() }}

backgroundColor: 'rgba(0,0,0,0.65)'

The background color of the container.

Zoom State: {{ zoomstate() }}

limitPan: true

Stop panning when the edge of the image reaches the edge of the screen.

Zoom State: {{ zoomstate() }}

listeners: 'auto'

By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen.

Zoom State: {{ zoomstate() }}

wheel: false

Scale with the mouse wheel.

Zoom State: {{ zoomstate() }}

wheelZoomFactor: 0.5

Zoom factor when zoomed in with the mouse wheel.

Zoom State: {{ zoomstate() }}

autoHeight: true

Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the tag. When setting the property value to `true`, a subscription to the window resize listener will be created.

Zoom State: {{ zoomstate() }}

draggableImage: true

Sets the attribute draggable to the img tag.

Zoom State: {{ zoomstate() }}

draggableOnPinch: true

Zoom State: {{ zoomstate() }}

enableClickToZoom: true

Click any point on the image to zoom to that exact location. Perfect for anomaly detection and defect inspection. Click again to zoom out.

Zoom State: {{ zoomstate() }}

clickToZoomScale: 3.5

Target zoom level when clicking to zoom. Default is 2.5x.

Zoom State: {{ zoomstate() }}

enableBrightnessControl: true

Enable brightness control button alongside zoom control. Click repeatedly to increment brightness until max, then reset to normal. Icon changes from outline sun (normal) to filled sun (brightened). Controls appear at the bottom center of the image.

Brightness State: {{ brightnessstate().toFixed(2) }}

brightnessStep: 0.2

Brightness adjustment increment. Each click increases brightness by this amount. Larger steps = fewer clicks to reach max. Default is 0.1.

Brightness State: {{ brightnessstate().toFixed(2) }}

minBrightness: 0.5, maxBrightness: 1.5

Limit the brightness range. Click button to increment from 1.0 to max (1.5), then reset to 1.0. Default range is 0.1 to 2.0.

Brightness State: {{ brightnessstate().toFixed(2) }}

Combined: Click-to-zoom + Brightness Control

Perfect for defect inspection and anomaly detection workflows. Click image to zoom in on suspicious areas, use brightness button to incrementally brighten the image for better detail visibility. Each feature uses a single button for clean UX.

Zoom State: {{ zoomstate() }} | Brightness State: {{ brightnessstate().toFixed(2) }}

Methods

Custom Zoom & Brightness Controls

Build your own custom control UI using the component's public methods. This example demonstrates plus/minus buttons with smart behavior: minus buttons are disabled when at minimum (initial state), plus buttons reset to minimum when at maximum. Perfect for integrating controls into your own toolbar or UI layout.

Zoom State: {{ zoomstate() }} | Brightness State: {{ brightnessstate().toFixed(2) }}