Javascript Image Inner Zoom & Magnifier on Hover – focus.js

Category: | August 5, 2018
Author: Spiderpig86
Views Total: 0 Views
Official Page: Go to Website
Last Update: March 28, 2019 at 8:51 pm
License: MIT
Javascript Image Inner Zoom & Magnifier

The focus.js is an excellent plugin to implement Zoom and magnifier effect on hover the images. It will Zoom out the images to view more clearly. It works with mouseover the images to show zoomer version of an image.

It is an ES6 and Vanilla Javascript plugin which allow creating a smooth and interactive image inner zoom functionality. This functionality reacts to mouse movement. The user moves the mouse cursor over the image to enlarge the image area and see it more clearly.

Basic usage

You have to include two main files of this plugin to start implementing. It provides you stylesheet and Javascript file which you need to add into your webpage.

<link href='focus.min.css' rel='stylesheet'/>
<script src='focus.min.js'></script>

The HTML is simple and easy to understand. You can define a  figure element and then add the image by defining a style. To implement the Zoom effect, you need to add class focus-img and smoother.

<figure class='fig focus-img smoother cursor-arrow' style='background-image: url("https://source.unsplash.com/category/nature/1024x768");'></figure>

After adding the tag to the page, initialize the library with a config object (params could be excluded).

<script>
    Focus.init({
        elementID: '',
        zoomFactor: '250%'
    });
</script>

If you keep the elementID blank, the inner zoom animation will apply entirely the page and all images on page produce the zoomer effect.

To target the specify set of images, you need to assign the ID to the elementID

The plugin provides many more options to customize it as per your need.  All default options to customize the focus.js.

let config = {
    imageSrc: 'https://source.unsplash.com/category/nature/1024x768',
    parentElement: null,
    zoomFactor: '250%',
    smoother: true,
    width: '100%', // Scale to parent component by default
    height: '66.7%', // Scale to percent of height by default
    cursor: '', // Leave blank for default cursor
    displayLoc: true,
    displayZoom: true,
    zoomOnScroll: true,
};
new FocusImage(config); // Object will automatically be appended to the parent element

 

You May Also Like