Image Zoom
Adds a zoom overlay to an image, for example for a product
This component should only be used in conjunction with an input with type="number" but does not handle any specific styling of the input or buttons. You can use the options to change the buttons if required.
Usage
Add a data attribute data-f-image-zoom to an img element. Pass the full source URL in the options.
Example
Markup
<img data-f-image-zoom="{ src : '...' }" src="..." alt="...">Set Render Container
If you don't want a popup to appear you can set an element as the container to render the image in.
Example
Markup
<img data-f-image-zoom="{ src : '...', renderTo : '.selector' }" src="..." alt="...">Popup Size
You can change the size and offset of the popup element via component options too.
Example
Markup
<img data-f-image-zoom="{ src : '...', renderTo : '.selector', offsetX : 50, offsetY : 50, renderWidth : 300, renderHeight : 150 }" src="..." alt="...">JavaScript options
| Option | Possible value | Default | Description |
|---|---|---|---|
src |
string | '' | The full source of the image |
renderTo |
string | false | If required, the selector of an element to render to |
offsetX |
integer | 10 | Mouse X Offset |
offsetY |
integer | 10 | Mouse Y Offset |
renderWidth |
integer | 500 | The width of the render popup |
renderHeight |
integer | 500 | The height of the render popup |
shiftHorizontal |
boolean | true | Shift render if mouse greater than half the screen width |
shiftVertical |
boolean | true | Shift render if mouse greater than half the screen height |
checkSize |
boolean | false | check to see if the source image is smaller than the one on the page |
checkSizeLimiter |
float | 0.5 | if checkSize is true, this value checks the percentage limit that the zoom will occur. Values between 0 and 1 |
Init element manually
let objZoom = FatKit.imageZoom(element, { /* options */ });