Img Zoom

ImgZoom component is avaliable on the Quick Editor which allows users to get a zoomed display when hovered over the picture.

Props

Props Name	Description	Type
src	The image URL. This prop is mandatory	`string`
width	Sets the width for the component.	`string`
height	Sets the height for the component.	`string`
zoomedAreaHeight	Sets the height of the zoomed image area.	`number`
zoomedAreaWidth	Sets the width of the zoomed image area.	`boolean`
zoomedAreaOpacity	Sets the opacity of the zoomed image area.	`string`
zoomedAreaColor	Sets the background color of the zoomed image area.	`string`
zoomedImageHeight	Sets the height of the zoomed image.	`number`
zoomedImageWidth	Sets the width of the zoomed image.	`number`
marginLeft	Margin-left value of the zoomed image and the actual image.	`number`
zoomType	Sets the image type.	`string`
zoomRate	Sets the zoom ratio when zoomType is set to 'on'.	`number`
zoomInUrl	Changes the zoom-in icon.	`string`
zoomOutUrl	Changes the zoom-out icon.	`string`
imageFit	Sets the object-fit property of the image.	`string`
disableZoom	Turns zoom on/off.	`boolean`
hideRotation	Show or hidden buttons for rotating the image	`boolean` .
visible	Visibility of ImgZoom component	`boolean`

Method Name	Description	Example Code
rotate	It allows to rotate the image.	`components.EdtrComp_1.rotate()`

Sets the image type. You can change it to 'NextTo' and 'On'.

When you increase zoomedAreaHeight and zoomedAreaWidht, you zoom out.

Margin-left value of the zoomed image and the actual image.

It allows to rotate the image 90 degree and multiples.

Possible values: 0 | 90 | 180 | 270 | 360 | -90 | -180 | -270 | -360