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

Main Product Image
Main Product Image
Main Product Image

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

Main Product Image

 

 

Markup

<img data-f-image-zoom="{ src : '...', renderTo : '.selector' }" src="..." alt="...">

You can change the size and offset of the popup element via component options too.

Example

Main Product Image
Main Product Image
Main Product Image

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 */ });