Mouse Hover Magnify Image In jQuery Plugin – jqZoom

Zoom
File Size: 97.4 KB
Views Total: 2437 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.

Related jQuery Plugins

You Might Also Like