Icontem

JS Image Magnifier: Show a zoomed version of an image under the mouse

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Info   View files Documentation   View files View files (9)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings  
2015-05-07 (2 months ago) RSS 2.0 feedNot enough user ratingsTotal: 237 All time: 172 This week: 56Up
Version License JavaScript version Categories  
magnifier 1.0.3MIT/X Consortium ...1.0Graphics
Description Author  

This object can show a zoomed version of an image under the mouse.

It can show a magnified version of an image inside a given page element.

The magnified image is loaded from another image URL. A message may appear while the magnified image is being loaded.

This object lets the user control the zoom level using the mouse wheel.

Callback functions may be invoked upon certain events on the image being magnified like entering, moving, leaving, zoom level change.

Innovation Award  
JavaScript Programming Innovation award nominee
November 2013
Number 2
Some Web sites need to show pictures of the products they are exhibiting in their Web pages.

In some cases it is useful for the user to see the products in greater detail, as if the user could look closer to the product.

This object implements a solution to magnify the images of the products by displaying a larger picture of the product with a lens.

Manuel Lemos
Picture of Mark Rolich
Name: Mark Rolich <contact>
Classes: 11 packages by
Country: Armenia Armenia
Age: 34
All time rank: 161 in Armenia Armenia
Week rank: 25 Down1 in Armenia Armenia Equal
Innovation award
Innovation award
Nominee: 5x

Winner: 1x

Details provided by the author  
Magnifier.js
=================

Javascript library enabling magnifying glass effect on an images.

<a href="http://mark-rolich.github.io/Magnifier.js/" target="_blank"><strong>Demo and documentation</strong></a>

Features:

* Zoom in / out functionality using mouse wheel
* Setting options via Javascript or data attributes
* Magnified image can be displayed in the lens itself or outside of it in a wrapper
* Attachment to multiple images with single call
* Attachment of user defined functions for thumbnail entering, moving and leaving and image zooming events
* Display loading text while the large image is loading, and switch to lens once its loaded

Magnifier.js requires Event.js package, which can be acquired at the following links:

* [Github](https://github.com/mark-rolich/Event.js)
* [JS Classes](http://www.jsclasses.org/package/212-JavaScript-Handle-events-in-a-browser-independent-manner.html)

Browser Compatibility
--------------------

Currently tested in:

* Chrome 24
* Firefox 18
* IE 7, 8, 9, 10
* Safari for Windows 5.1.7

Bug tracker
-----------

Have a bug? Please create an issue here on GitHub!

https://github.com/mark-rolich/Magnifier.js/issues

Copyright and License
---------------------

The MIT License (MIT)

Copyright (c) 2013 Mark Rolich

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
  Files folder image Files  
File Role Description
Files folder imagedemo (5 files)
Accessible without login Plain text file magnifier.css Data Main css
Plain text file Magnifier.js Class Main class
Accessible without login Plain text file mit-license.txt Lic. LICENSE
Accessible without login Plain text file README.md Data README

  Files folder image Files  /  demo  
File Role Description
  Accessible without login Plain text file demo.css Data Demo css
  Plain text file Event.js Class Event library
  Accessible without login Plain text file gallery.css Data Demo gallery css
  Accessible without login Plain text file Gallery.js Aux. Demo gallery
  Accessible without login HTML file index.html Doc. Demo

Downloadmagnifier-2015-05-07.zip 13KB
Downloadmagnifier-2015-05-07.tar.gz 10KB
Install with ComposerInstall with Composer
Needed packages  
Class DownloadWhy it is needed Dependency
Event Download .zip .tar.gz For cross-browser event handling Required
 Version Control Unique User Downloads Download Rankings  
 100%Total:237All time:172
 This week:0This week:56Up