Two plugins to zoom in images:intense-images.js and zooming.js

Photo by Bernard Hermant on Unsplash

When shopping online or browsing the galary, we’d like to zoom in the image which takes small space for neat view or loading speed related resons. And I found two plugin which is convient works well and sufficient,named intense-image.js and zooming.js.I will record below one by one.

First one is intense.js.

Github source DOWNLOAD

Details:

STEP1:
link intense.js in the body.
link download Github

STEP2:
An image derived from the library with the class name.
data-title and data-caption are the captions of the image at an absolute position.

When the page is loaded, the image executes the Intense() function.

You can change cursor images and size in CSS.

The second is zooming.js:

Github source DOWNLOAD

Details:

STEP1:
link zooming.js in body
link download Github and more document

STEP2:
The image is wrapped in the grid.
After the content is loaded, the zooming function executes with customized options.
I change few, such as background color, background opacity, resizable of large images, and the duration of the transition.


Overall, the two plugins is doing the same job, and both work on the small screen on mobile. The intense.js is for full-screen expansion.

👉Follow me for more useful web development content! love sharing🥰