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 controls alongside zoom controls. Perfect for brightening dark images or examining details in shadows. Controls appear at the bottom center of the image.

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

brightnessStep: 0.2

Brightness adjustment increment. Larger steps for faster adjustments. Default is 0.1.

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

minBrightness: 0.5, maxBrightness: 1.5

Limit the brightness range. 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 to zoom in on suspicious areas, adjust brightness to see details.

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