spz-zoom

To zoom the image on click, mouseover or touch. The element must have a child element. Its copy element will be added a `zoom` attribute when the `spz-zoom` is built. A `zoom-in` attribute will be given to the current element when it is zooming in.

布局

container

Usage

The example below contains all attributes and actions of the element.

<div class="hidden" id="zoom-in-text">The image is zoomed in.</div>

<spz-zoom
  layout="container"
  ratio="2"
  interact="click"
  @zoomIn="zoom-in-text.toggleClass(class='hidden', force=false);"
  @zoomOut="zoom-in-text.toggleClass(class='hidden', force=true);"
>
  <spz-img
    layout="fixed"
    width="200"
    height="200"
    src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8.jpg"
    alt="a bicycle"
    object-fit="cover"
  ></spz-img>
</spz-zoom>

Attributes

ratio

It indicates magnification factors with a number. Its default value is 1.5.

interact

It indicates the zoom by a different behavior. It has the following values:

mouseover: default. Zoom in with a mouseover.
click: Zoom in with a mouse click.
touch: Zoom in with the touch screen on mobile.

zoom-width

Set the width of zoom when the value of the interact attribute is touch. Its default value is 1080.

Actions

zoomIn

The zoomIn is triggered with zoom in. No parameter required.

zoomOut

The zoomOut is triggered with zoom out. No parameter required.