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    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 360 All time: 105 This week: 6Up
Version License JavaScript version Categories
icfb-photo-tag 1.1MIT/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
Age: 40
All time rank: 641 in Serbia Serbia
Week rank: 6 Up1 in Serbia Serbia Equal

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:360
This week:0
All time:105
This week:6Up