Image magnifier
Discover image with image magnifier component.
About
You can discover image with image-magnifier
component.
To create image magnifier, add role data-role="imagemagnifier"
to container and put image in the container.
You can create two type of image magnifier: glass
and zoom
.
Image magnifier glass
To create image magnifier glass
, you must add attribute data-magnifier-mode="glass"
.
<div data-role="imagemagnifier" data-magnifier-mode="glass">
<img src="images/tiger-8214815_640.png">
</div>
You can use attribute data-lens-type
to set type of magnifier lens
.
To set circle magnifier lens, use value circle
.
To change size of the lens, use attribute data-lens-size
.
<div data-role="imagemagnifier"
data-magnifier-mode="glass"
data-lens-type="circle"
data-lens-size="200"
>
<img src="images/tiger-8214815_640.png">
</div>
Image magnifier zoom
To create image magnifier zoom
, you must add attribute data-magnifier-mode="zoom"
.
<div data-role="imagemagnifier" data-magnifier-mode="zoom">
<img src="images/tiger-8214815_640.png">
</div>
You can define your one zoom element with attribute data-zoom-element
.
To set, use right element selector.
Zooming
To change zooming of the lens, use attribute data-magnifier-zoom
.
By default this attribute have a value 2
.
This attribute used for set zoom element size for image magnifier zoom.
Customize
You can use attributes data-cls-magnifier
, data-cls-lens
, data-cls-zoom
to customize magnifier elements.