#Using the Plugin
The plugin has the following dependencies:
- jQuery (>=1.8)
- jQuery UI (>=1.8)
- Hammer.js (>=2.0.8)
- jquery.hammer.js (>=2.0.0)
- jquery-mousewheel (>=3.0)
- imgviewer (>=1.0.0)
Include either the development version or minified production version of the JS file located
in the dist folder and associated dependencies into your web page:
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" media="screen">
<style type="text/css" media="all">@import "imgNotes.css";</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="hammer.min.js"></script>
<script src="jquery.hammer.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="imgViewer.min.js"></script>
<script src="imgNotes.min.js"></script>
...
</head>Put an image element and a javascript block to attach the plugin to the image in the web page body:
<body>
...
<img id="image1" src="test.jpg" width="80%" />
...
<script>
(function($) {
$(document).ready(function(){
$("#image1").imgNotes();
});
})(JQuery);
</script>
...
</body>