Lightweight jQuery Image Annotation Plugin - adhere

File Size: 162 KB
Views Total: 4541
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">
    <img src="1.png" />
    <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>

3. Initialize and setup the plugin in the javascript.

  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.

  smart:false, // false, smart-inner, smart-outer



  • 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.