Zoom Control
Zoom Example
The zoom control can be used to zoom in or out of any visible element on a specified event. A practical zoom setting would normally be a multiple or a fraction of 1, since a value of 1 equates to the current size.
<div class="flex justify-content-center gap-md"> <img src="/webui/assets/images/scotland_thumb_1.jpg" width="100" height="82" alt="Media" class="zoom-image" /> <img src="/webui/assets/images/scotland_thumb_2.jpg" width="100" height="82" alt="Media" class="zoom-image" /> <img src="/webui/assets/images/scotland_thumb_3.jpg" width="100" height="82" alt="Media" class="zoom-image" /> </div>
HTML
webui.ready( () => {
ui(".zoom-image").zoomControl({
zoomFactor: 1.2,
trigger: "hover",
transitionDuration: 300,
zoomInCallback: null,
zoomOutCallback: null
});
});
JS
Zoom Callback functions
The configuration settings include the ability to specify two callback functions which will be called on either a zoom in or a zoom out event. See the following example.
<div class="flex justify-content-center"> <img src="/webui/assets/images/landscape_5.jpg" alt="Media" class="image" id="zoomImage" /> </div> <div class="row-spacing-lg"></div> <label id="zoomEventMessage" class="text-sm text-italic"> </label>
HTML
webui.ready( () => {
ui("#zoomImage").zoomControl({
zoomFactor: 1.1,
trigger: "hover",
transitionDuration: 300,
zoomInCallback: zoomIn,
zoomOutCallback: zoomOut
});
function zoomIn(e) {
ui("#zoomEventMessage").text("Zoom in event.");
}
function zoomOut(e) {
ui("#zoomEventMessage").text("Zoom out event.");
}
});
JS
Settings
Javascript settings available for the zoom control.
| Setting | Description |
|---|---|
| zoomFactor | The amount of zoom required on the specified event. A positive integer or decimal value. Default: 1.1 |
| trigger | The type of event that will trigger the zoom effect. A string value. Can be "hover" or "focus". Default: "hover". |
| transitionDuration | The length of time taken by the transition effect in milliseconds. Default: 300. |
| zoomInCallback | A function that will be called when a zoom in event occurs. |
| zoomOutCallback | A function that will be called when a zoom out event occurs. |