ZoomIt.js---jQuery plugin that adds simple, highly configurable dynamic zoom functionality for your images

ZoomIt.js is a jQuery plugin which could magnify the image dynamically.

gitHub here

Step1:
link jquery
zoomIt.css and zoomIt.js

<link rel="stylesheet" media="all" href="dist/styles/zoomit.css" />

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="dist/scripts/jquery.zoomit.min.js"></script>

Step2:
html

html

img id for selecting in script
src links small picture
data-zoomed links big picture

Step3:
js

Initialize the plugin

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

CodemySite_Web development