Zoom Full Size Image On mouse hover using jQuery Image Magnifier

Author: CharlesStover
Official Page: Go to website
Last Update: September 7, 2021
License: MIT

tinted-zoom

Description:

A beautiful and light weight jQuery image magnifier plugin that will help you, if you are looking to implement zoom functionality in your project.

How it works:

The zoom functionality will work on mouse hover on images.

Supported zoom types:

  1. Inner Zoom
  2. Tinted Zoom
  3. Soft Focus Zoom
  4. Tinted, Soft Focus Zoom

Compatibility: IE6+, Chrome, Mozilla Firefox, Safari, Opera.

How can use it?

Implementation of jQuery Image Magnifier plugin is very easy. You will need to follow below steps.

Step 1: Download the plugin from above link and include the image-magnifier.js and image-magnifier.css files in your web page.

<script type="text/javascript" src="assets/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="image-magnifier.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="image-magnifier.css" />

Step 2: Call the jQuery Image Magnifier plugin and set the image paths of thumbnail image and a full-size image that will be shown in when user will mouse hover on thumbnail image. And, you will also need to set zoom type. In this example I’m going set zoom type as ‘inner’ (for Inner zoom).

<script type="text/javascript">
    imageZoom(
        { blur: false, inner: true, tint: false },
        { src: 'assets/images/1600x1280.jpg', height: 1280, width: 1600 },
        { src: 'assets/images/thumbnails/1600x1280.jpg', height: 512, width: 640 }
    );
</script>

Step 3: If you want to use tinted zoom:

<script type="text/javascript">
    imageZoom(
        { blur: false, inner: false, tint: '#FF0000' },
        { src: 'assets/images/fox.jpg', height: 1280, width: 1600 },
        { src: 'assets/images/thumbnails/fox.jpg', height: 256, width: 320 }
    );
</script>

Step 4: For Soft Focus Zoom.

<script type="text/javascript">
    imageZoom(
        { blur: true, inner: false, tint: false },
        { src: 'assets/images/uss-peterson.jpg', height: 1280, width: 1600 },
        { src: 'assets/images/thumbnails/uss-peterson.jpg', height: 256, width: 320 }
    );
</script>

Step 5: To implement Tinted, Soft Focus Zoom:

<script type="text/javascript">
    imageZoom(
        { blur: true, inner: false, tint: '#FF0000' },
        { src: 'assets/images/eisenhower.jpg', height: 1280, width: 1600 },
        { src: 'assets/images/thumbnails/eisenhower.jpg', height: 512, width: 640 }
    );
</script>