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 }
Next: Top free websites to increase your website traffic
Supported Devices
Chrome, IE7+, FireFox, Opera, Safari
Tags
image annotation, image marker, devstoc freebies, image note, image-annotation github, image annotation tool