Icontem

icfb Photo Tag: jQuery plugin to tag user-defined picture areas

Recommend this page to a friend!
  Info   View files View files (16)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2013-08-25 (3 years ago) RSS 2.0 feedNot enough user ratingsTotal: 355 All time: 97 This week: 21Up
Version License JavaScript version Categories
icfb-photo-tag 1.0MIT/X Consortium ...1.0jQuery, Graphics
Description Author

This object is a jQuery plugin to tag user-defined picture areas.

It lets the user define one or more areas of a picture by marking a rectangle on the picture.

The user may also resize or drag the marked area rectangles.

The object may also display the picture in view-only mode just showing the marked areas without letting the user change them.

Picture of Igor Crevar
Name: Igor Crevar <contact>
Classes: 2 packages by
Country: Serbia Serbia

Details
icfbPhotoTag - Photo Tagging like on facebook jquery plugin
==============

== Overview ==

This plugin provides you functions which you can use to develop photo tagging aplication like facebook already has.

Plugin parameters are:
 boxClass: 'icfbPhotoTag' - class you can used for css styling
 boxWidth:120 - initial box(tag) width on new box creation
 boxHeight:120 - inital box height
 minBoxWidth:80 - minimal box width
 minBoxHeight:80 - minimal box width
 borderSize:2 - use this to specify box border size
 onMouseOverBox: function(data) -  data is in format { title: 'title', id: 'id', obj: jqueryobject, coords: coordsOfMousePointer, boxClass: options.boxClass } . This method is called
 when plugin is in "view" state and mouse pointer is over some box
 onMouseOutOfBox: function(data) - callend in "view" state when mouse pointer lives box
 boxes: [], - boxes passed to plugin on initialization. array is in format [{id: 10, x1:1,x2:90,y1:10,y2:90,title:'Igor Crevar'},{id: 20, x1:40,x2:130,y1:10,y2:100,title:'John John'}];
 status: false - dont change this in this release

Create icfbPhotoTag on some jquery object(s) with:
var obj = $('#id_of_a_image');
obj.icfbPhotoTag();
 
 
 After that you can acces some public methods of a plugin:
 obj.icfbPhotoTag.view - put plugin in viewing state - so you can see all tags all together
 obj.icfbPhotoTag.edit - put plugin in edit state. Now you can move , resize already added tags(boxes)
 obj.icfbPhotoTag.add  - put plugin in add state. Now you are adding new box. If you call it with  obj.icfbPhotoTag.add(false) new tag(box) will not be added automaticaly
 obj.icfbPhotoTag.save - stop editing/adding.
 obj.icfbPhotoTag.cancel - stop editing/adding but revert all changes maded
 obj.icfbPhotoTag.removeBox - remove box with some index - you will never use this in most cases, but you will use method bellow
 obj.icfbPhotoTag.removeBoxById - remove box by id
 obj.icfbPhotoTag.setTitleOfLast - set title of last box(tag). Use this after saving new tag
 obj.icfbPhotoTag.setIdOfLast - set id of last box(tag). Use this after saving new tag
 obj.icfbPhotoTag.getLastBox - gets last tag(box) in format { id: , title:, x1: , x2: , y1: , y2: }
 obj.icfbPhotoTag.getBoxes - get all tags(boxes) like array of  format above
 obj.icfbPhotoTag.displayBoxes - obj.icfbPhotoTag.displayBoxes(true) shows all boxes obj.icfbPhotoTag.displayBoxes(false) hiddes all
 obj.icfbPhotoTag.isNew - is plugin in add new state?
 obj.icfbPhotoTag.displayBox -  function(_id,_visible) , hiddes or shows box(tag) with id _id

 
 You can use this plugin for photo cropping also! but there are already better plugins for that :)
 
  Files folder image Files  
File Role Description
Files folder imageselectionbox (2 files)
Accessible without login Image file b_1246622364p1.jpg Photo just some random image used in examples. Picked from my almost dead soc networking site...
Accessible without login Plain text file getusers.php Data php script for retrieving users. Used in examples
Accessible without login Plain text file icfbphototag.css Data css for plugin
Plain text file icfbphototag.js Class actual plugin
Accessible without login Plain text file index.html Example examples hub
Accessible without login Plain text file index1.html Example example 1
Accessible without login Plain text file index2.html Example example 1
Accessible without login Plain text file index3.html Example example 3
Accessible without login Plain text file index5.html Example example 4
Accessible without login Plain text file jquery.js Aux. jquery library - i do not know if this is permited but i need this for examples
Accessible without login Plain text file LICENSE Lic. LICENSE
Accessible without login Image file marqueeHoriz.gif Icon image used by plugin
Accessible without login Image file marqueeVert.gif Icon image used by plugin
Accessible without login Plain text file README Doc. README

  Files folder image Files  /  selectionbox  
File Role Description
  Accessible without login Plain text file icselectionbox.css Data my other plugin used in examples
  Plain text file icselectionbox.js Class my other plugin used in examples

 Version Control Unique User Downloads Download Rankings  
 100%
Total:355
This week:0
All time:97
This week:21Up