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

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   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

Jackson Knowlton

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: 26
All time rank: 536 in United States United States
Week rank: 6 Up2 in United States United States Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 3x

Winner: 1x

Example

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<script src="imageMagnifier.class.js"></script>


<script>
  $('document').ready(function(){
    var magnify = new magnifier();
    magnify.magnifyImg($('img'), 7, '250px');
  });
</script>
</head>
<body>
<img src="includes/exImage.jpg">
</body>
</html>

  CodePen UsageExternal page   Usage 2 (May take a while to load)External page  
  Files folder image Files (4)  
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 (4)  /  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

Downloadimage-magnifier-2015-05-11.zip 2873KB
Downloadimage-magnifier-2015-05-11.tar.gz 2873KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:100
This week:0
All time:414
This week:4Up
User Comments (1)
The example have a small mistake
9 years ago (David Bernal)		65%StarStarStarStar
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.