Add comment bubbles on top of your images with ease
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
editor
src
.gitignore
gulpfile.js
package.json
readme.md

readme.md

Labelmaker

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

labelmaker

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'});