Lightweight jQuery Image Annotation Plugin - adhere
File Size: | 162 KB |
---|---|
Views Total: | 4398 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

adhere is a lightweight, easy-to-use jQuery plugin that enable you to embed annotations, notes, Ads or other stuff on images. Hover over the markers to see details in a tooltip like pop box.
See also:
- jQuery Plugin For Adding Notes and Markers To An Image - imgNotes
- jQuery Plugin To Add Text Notes Over The Images - Text Over
- 7 Best Image Annotation Tools In JavaScript
How to use it:
1. Include the jQuery adhere plugin and other resources in the page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.adhere.min.js"></script>
2. Insert an image in a container element and create annotations using ul
li
elements with data-coords
attribute.
<section class="adhere" id="example"> <figure> <img src="1.png" /> </figure> <ul> <li data-coords="ah-239-29">School Seal / Logo</li> <li data-coords="ah-100-11">Survey User Comments</li> ... <li data-coords="ah-396-357">Link to Reports</li> </ul> </section>
3. Initialize and setup the plugin in the javascript.
$(".adhere").adhere({ captionContainer:'ul', collapseList:true, marker:{xAlign: 'center', yAlign:'center', html:''}, caption:{className:'caption', xAlign:'center', yAlign:'top'} });
4. Style the annotations in the CSS.
.img-marker { width: 11px; height: 11px; background: url('marker.png') left top no-repeat; } .img-marker:hover { cursor: pointer; } .caption { padding: 8px 5px; width: 130px; font-size: 12px; line-height: 17px; color: #fff; background-color: #d11919; border-radius: 3px; text-align: center; }
5. Available plugin options.
$(".adhere").adhere({ captionContainer:'dl', collapseList:true, smart:false, // false, smart-inner, smart-outer marker:{className:'',xAlign:'center',yAlign:'center',html:''}, caption:{className:'',xAlign:'center',yAlign:'center',xDistance:5,yDistance:5}, action:{cEvent:'mouseover',cName:''} });
Changelog:
2023-03-18
- Minimal updates for cached images, touch and deprecation.
This awesome jQuery plugin is developed by melkristian. For more Advanced Usages, please check the demo page or visit the official website.