https://github.com/arturi/labelmaker
Add comment bubbles on top of your images with ease
https://github.com/arturi/labelmaker
comment-bubbles labeling labels
Last synced: 9 months ago
JSON representation
Add comment bubbles on top of your images with ease
- Host: GitHub
- URL: https://github.com/arturi/labelmaker
- Owner: arturi
- Created: 2014-12-02T23:24:05.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2021-02-04T12:36:29.000Z (over 5 years ago)
- Last Synced: 2025-04-24T02:13:10.902Z (about 1 year ago)
- Topics: comment-bubbles, labeling, labels
- Language: JavaScript
- Homepage: http://arturi.github.io/labelmaker
- Size: 6.76 MB
- Stars: 15
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Labelmaker
Labelmaker is a jQuery plugin that allows you to tag your images and add comments with ease.
[](http://arturi.github.io/labelmaker)
Check out [the demo](http://arturi.github.io/labelmaker)!
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](http://arturi.github.io/labelmaker/editor/) to add tags to your image
## Usage
1. Upload your image somewhere.
2. Paste the link to your image into [the editor](http://arturi.github.io/labelmaker/editor/), then use it to add tags and comments
3. Add your image and the tag data generated by the editor to your page:
```
- Orange juice
- Yummy peaches
```
4. Add jQuery and Labelmaker, then run Labelmaker, passing the image and the tag data block to it:
```
$('.labelmaker').labelmaker($('.labelmaker-points'));
```
## 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'});
```