JavaScript Magnifying Glass Effect: Create a magnifying glass look over an image

Recommend this page to a friend!
  Info   View files Example   Demos   View files View files (4)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 100 All time: 414 This week: 4Up
Version License JavaScript version Categories
image-magnifier 1.4GNU Free Document...2.0HTML, jQuery, Graphics
Description Author

This object can create a magnifying glass look over an image.

It takes a given image element on the page and changes the cursor image that shows when the user drags the mouse over the image, so it appears a round glass showing the image magnified inside the glass.

The magnification zoom scale and the size of the glass cursor are configurable parameters.

Picture of Jackson Knowlton
  Performance   Level  
Name: Jackson Knowlton <contact>
Classes: 4 packages by
Country: United States United States
Age: 24
All time rank: 536 in United States United States
Week rank: 6 Up2 in United States United States Up
Innovation award
Innovation award
Nominee: 3x

Winner: 1x

  CodePen UsageExternal page   Usage 2 (May take a while to load)External page  

Open in a separate window

Open in a separate window

  Files folder image Files  
File Role Description
Files folder imageincludes (2 files)
Plain text file imageMagnifier.class.js Class Class source
Accessible without login Plain text file example.html Example Example usage

  Files folder image Files  /  includes  
File Role Description
  Accessible without login Image file exImage.jpg Photo Image for use in example
  Accessible without login Plain text file styles.css Data Styles for example and class

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:414
This week:4Up
User Comments (1)
The example have a small mistake
7 years ago (David Bernal)