Lightweight jQuery Image Annotation Plugin - adhere

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.