Tagging Photo

You can add tags with points on photo and manage it with edit and delete, it will be shown as tooltip on hover on point or photo using jQuery ( javascript library )

Buy Now Demo

Sample code for run plugin
 
plugin resources
                                        
<link rel="stylesheet" href="tagging-photo/tagging-photo.min.css">
<script src="tagging-photo/tagging-photo.min.js"></script>
                                        
                                    
HTML code
                                        
<img src="path-name/photo.jpg"
class="tagging-photo"
data-points-color="red"
data-allow-add-tags="true"
data-show-all-on-hover="true"
data-show-tags-buttons="true"
data-points='[]'
alt="">
Javascript code 
                                        
$(window).on('load', function () {
    taggingPhoto.init($('img.tagging-photo'), {
        onAddTag: function (points) {
            console.log(points); // Event function to return array of tags after add or edit and delete tag
        }
    });
});
Data attributes for set your options
Attributes Sample
data-points
an array of points with text and positions. 		data-points='[{"top": 279, "left": 93.5, "text": "Tag [ 1 ]"},{"top": 370, "left": 308.5, "text": "Tag [ 2 ]"},{"top": 144, "left": 211.5, "text": "Tag [ 3 ]"},{"top": 221, "left": 211.5, "text": "Tag [ 4 ]"}]'
data-allow-add-tags
allow add or edit and delete tags. 		data-allow-add-tags="true"
data-show-all-on-hover
show all tags on hover on photo. 		data-show-all-on-hover="true"
data-show-tags-buttons
show tags buttons after photo division. 		data-show-tags-buttons="true"
data-points-tooltip-follow
tooltip follow [ up , down , left , right ]. 		data-points-tooltip-follow="up"
data-points-color
background color of points.
data-points='red'
Colors :
  1. white
  2. black
  3. red
  4. yellow
  5. orange
  6. pink
  7. violet
  8. blue
  9. green
  10. brown

Demo

Basic Example
                                                
<img src="assets/images/demo-1.jpg"
class="tagging-photo"
data-show-tags-buttons="true"
data-points='[{"top": 227, "left": 106.5, "text": "Chair"},{"top": 401, "left": 248.5, "text": "Mouse"},{"top": 298, "left": 374.5, "text": "Keyboard"},{"top": 343, "left": 471.5, "text": "Eyeglasses"}]'
alt="">
Example with show tags fo edit and delete
                                                
<img src="path-name/photo.jpg"
class="tagging-photo"
data-points-color="red"
data-allow-add-tags="true"
data-show-all-on-hover="true"
data-show-tags-buttons="true"
data-points-tooltip-follow="down"
data-points='[{"top": 279, "left": 93.5, "text": "Tag [ 1 ]"},{"top": 370, "left": 308.5, "text": "Tag [ 2 ]"},{"top": 144, "left": 211.5, "text": "Tag [ 3 ]"},{"top": 221, "left": 211.5, "text": "Tag [ 4 ]"}]'
alt="">