Labelmaker

Labelmaker is a jQuery plugin that allows you to tag your images and add comments with ease.

Check out the demo!

Features:

• Responsive
• Supports links and images in comments
• Comment bubbles always fit within the image and scroll inside if the comment is too long
• Your comments are visible as a list, even when Labelmaker is not available — RSS feeds, read-it-later services, slow connection
• An editor to add tags to your image

Usage

1. Upload your image somewhere.

2. Paste the link to your image into the editor, then use it to add tags and comments

3. Add your image and the tag data generated by the editor to your page:

   <img src="IMG_1707.jpg" class="labelmaker">
   <ul class="labelmaker-points">
    <li data-left="80" data-top="80">Orange juice</li>
    <li data-left="80" data-top="45">Yummy peaches</li>
   </ul>
   

4. Add jQuery and Labelmaker, then run Labelmaker, passing the image and the tag data block to it:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="jquery.labelmaker.min.js"></script>
   <link href="labelmaker.min.css" rel="stylesheet">
   
   <script>
     $('.labelmaker').labelmaker($('.labelmaker-points'));
   </script>
   

Settings

You can choose whether to show comments on click or hover. Click is the default, so if you want hover:

$('.labelmaker').labelmaker($('.labelmaker-points’), {showOn: 'hover'});