Lightweight jQuery Image Annotation Plugin - adhere

Lightweight jQuery Image Annotation Plugin - adhere
File Size: 160 KB
Views Total: 3741
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:

How to use it:

1. Include the jQuery adhere plugin and other resources in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></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>
<ul>
<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>
...
</ul>
</section>

3. Initialize and setup the plugin in the javascript.

<script type="text/javascript">
$(document).ready(function(){
$(".adhere").adhere({
captionContainer:'ul',
collapseList:true,
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'}
action:{cEvent:'mouseover',cName:''}
});
});
</script>

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.