Mouse Hover Magnify Image In jQuery Plugin – jqZoom

A jqZoom is fast and light weight jQuery plugin for image zoom that applies a mouse hover magnifying glass to any image within the document. A magnified image will be displayed outer side in a wrapper area with configurable size. it help for better view in product detail with zoom effect.

How to use it:

Load the necessary stylesheet jquery.jqZoom.css in the document’s head section.

Here we’re inserting (“css/jquery.jqZoom.css/“) CSS coded file into the existed code.

<link rel="stylesheet" href="css/jquery.jqZoom.css" />

Add class in element with named of ‘zoom-box’.

Here, we created a class with name “zoom-box“, Inserting an image from the source with width 200 & height 150.

<div class="zoom-box">
  <img src="1.jpg" width="200" height="150" />
</div>

Add the JavaScript file jquery.jqZoom.js after jQuery.

Here we’re are inserting two different Java Script code “/path/to/cdn/jquery.min.js” & “/path/to/jquery.jqZoom.js” into the existing code.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.jqZoom.js"></script>

Apply the jQuery script with function of jqZoom to the image.

Here, we’re applying jQuery Script with Function jqZoom to the image.
In the above code, we applied a function using a function(), we inserted the name of the tag “img” to the function “jqZoom”.

$(function(){
  $("img").jqZoom({
    // settings here
  });
})

Ads Script for the height/width (in pixels) of the lens.

In this code, we’re inserting the selector width 30 and the selector height 30 of the images in pixels. This code is inserted in the jqZoom function itself.

$(function(){
  $("img").jqZoom({
    selectorWidth: 30,
    selectorHeight: 30
  });
})

Add script for the height/width of the wrapper that holds the magnified image.

Here we’ll insert the selector width 30 and the selector height 30 of the images in pixels, This size image will only be viewed when we mouse hover placed on the image only. That’s why we wrote that height/width as ViewerWidth 400 & ViewerHeight 300.

$(function(){
  $("img").jqZoom({
    selectorWidth: 30,
    selectorHeight: 30,
    viewerWidth: 400,
    viewerHeight: 300
  });
})

Done