Lightweight Image Annotation jQuery Plugin

Mel Kristian March 11, 2023

Adhere is a lightweight, user-friendly jQuery plugin that allows you to embed annotations, notes, advertisements, and other content on images. Hover over the markers to see more information in a tooltip-style pop box.

Adhere jQuery plugin Implementation

Include the jQuery library and Adhere jQuery plugin in your page.

Insert an image into a container element and use ul li elements with the data-coords attribute to create annotations.


  
    
  
  
    Bicycle       
    Lady Riding
    ...
    Bus

In the javascript, initialise and configure the plugin.

var options = {
  captionContainer:'ul',
  collapseList:true,
  marker:{xAlign: 'center', yAlign:'center', html:''},
  caption:{className:'caption', xAlign:'center', yAlign:'top'}
};

$(".devstocDemo").adhere(options);

//OTHER OPTIONS
{
  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:7,yDistance:7},
  action:{cEvent:'mouseover',cName:''}
}

Style the annotations in CSS.

.img-marker { 
  width: 12px; 
  height: 12px; 
  background: url('marker.png') left top no-repeat; 
  object-fit: cover
}

.img-marker:hover { cursor: pointer }

.caption { 
  padding: 8px 5px; 
  width: 125px; 
  font-size: normal; 
  line-height: auto; 
  color: white; 
  background: #0055cc; 
  border-radius: .25rem; 
  text-align: left
}