Lightweight jQuery Image Annotation Plugin - adhere

File Size: 160 KB
Views Total: 4222
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=""></script>
<script src=""></script>
<script type="text/javascript" src="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">
<figure> <img src="1.png" width="" height="" alt="" /> </figure>
<li data-coords="ah-239-29"> Image Annotation 1 </li>
<li data-coords="ah-100-11"> Image Annotation 1 </li>
<li data-coords="ah-77-142"> Image Annotation 3 </li>

3. Initialize and setup the plugin in the javascript.

<script type="text/javascript">
smart:false, // false, smart-inner, smart-outer
marker:{xAlign: 'center', yAlign:'top', html:'<span class="img-marker"></span>'},
caption:{className:'caption', xAlign:'left', yAlign:'center'}

4. Sample CSS to style the markers.

smart:false, // false, s.img-marker {
width: 11px;
height: 11px;
background: url('../images/red_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;
.as-cap {
padding: 5px;
width: 100px;
font-size: 11px;
line-height: 15px;
text-align: right;
background-color: #cff;
.left {
float: left;
.right {
float: right;
.center {
text-align: center;
}mart-inner, smart-outer

This awesome jQuery plugin is developed by melkristian. For more Advanced Usages, please check the demo page or visit the official website.