Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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

About

Add comment bubbles on top of your images with ease

Topics

Resources

Releases

No releases published
You can’t perform that action at this time.