ZoomIt

Example

Usage

 

1. Include jQuery <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2. Include ZoomIt (CSS / Script) <link rel="stylesheet" media="all" href="dist/styles/zoomit.css">
<script src="dist/scripts/jquery.zoomit.min.js"></script>
3. Initialize on image element <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Bower

 

The plugin is available on the Bower registry

bower install --save zoomit

NPM / Yarn

 

The package is also available via the NPM repository. Simply:

npm install --save zoomit

Or

yarn add zoomit

Options

 

• img (jQuery Object)
  • The "unzoomed" image object that is intended to zoom
• src (String) | Function)
  • May either be a string or a function that returns a string of the path to the large image to be zoomed.
• class (Object)
  • Object containing different class names used by the plugin
• container (String: Default zoomit-container)
  • Class to be used for the container
• loaded (String: Default loaded)
  • Class to be used when the zoomed image is loaded
• img (String: Default zoomit-zoomed)
  • Class to be used for the zoomed image element
• ghost (String: Default zoomit-ghost)
  • Class to be used for the "ghost" element above the zoomed image element. The "ghost" element is used to watch mouse events.

Events

 

• onZoomIn (Function)
  • Callback function that is executed when the image is zoomed
  • The options object is passed as an argument
• onZoomOut (Function)
  • Callback function that is executed when the image zoom is hidden
  • The options object is passed as an argument
• onClick (Function)
  • Callback function that is executed when the zoom area is clicked
  • The options object is passed as an argument
• onInit (Function)
  • Callback function that is executed when the plugin is initialized
  • The options object is passed as an argument