WebUI mobile-first CSS

Zoom Settings

The following table describes the javascript settings available in WebUI for zoom controls.

Setting

Description

zoom

The amount of zoom required on the specified event. A positive or negative 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: 500.

Zoom Control

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.

Example

Markup

<div class="container flex-justify-center gap-horizontal-sm">
  <img src="/webui/10x/assets/images/scotland_thumb_1.jpg" width="100" height="82" alt="Media" class="zoom-image" />
  <img src="/webui/10x/assets/images/scotland_thumb_2.jpg" width="100" height="82" alt="Media" class="zoom-image" />
  <img src="/webui/10x/assets/images/scotland_thumb_3.jpg" width="100" height="82" alt="Media" class="zoom-image" />
</div>

Script

webui.ready(function() {

  ui(".zoom-image").zoomControl({ 
    zoom: 1.1,
    trigger: "hover",
    transitionDuration: 300
  });

});