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/hopetoun_falls.jpg">
                    </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/hopetoun_falls.jpg">
                    </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/hopetoun_falls.jpg">
                    </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.