File: index1.html

Recommend this page to a friend!
  Classes of Igor Crevar   icfb Photo Tag   index1.html   Download  
File: index1.html
Role: Example script
Content type: text/plain
Description: example 1
Class: icfb Photo Tag
jQuery plugin to tag user-defined picture areas
Author: By
Last change: Update of index1.html
Date: 2 years ago
Size: 2,210 bytes
 

Contents

Class file image Download
<html> <head> <title></title> <meta content=""> <link rel="stylesheet" type="text/css" href="icfbphototag.css"></link> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="icfbphototag.js"></script> <script type="text/javascript"> $(window).load(function(){ var obj = $('img#myimage'); var _boxes = [{id: 10, x1:10,x2:250,y1:140,y2:200,title:'Igor Crevar'}, {id: 20, x1:210,x2:130,y1:10,y2:100,title:'John John'}]; obj.icfbPhotoTag( { boxes: _boxes } ); $('#view').click(function(){ obj.icfbPhotoTag.view(); return false; }); $('#edit').click(function(){ $('#main_links').hide(); $('#edit_links').show(); obj.icfbPhotoTag.edit(); return false; }); $('#new').click(function(){ $('#main_links').hide(); $('#edit_links').show(); obj.icfbPhotoTag.add(); return false; }); var increment = 0; $('#save').click(function(){ $('#main_links').show(); $('#edit_links').hide(); obj.icfbPhotoTag.save(); //set new title/id, obj.icfbPhotoTag.setTitleOfLast('New tag '+(++increment)).setIdOfLast(100); return false; }); $('#cancel').click(function(){ $('#main_links').show(); $('#edit_links').hide(); obj.icfbPhotoTag.cancel(); return false; }); $('#save_all').click(function(){ var boxes = obj.icfbPhotoTag.getBoxes(); var s = ''; for (i in boxes) { var k = 0; for (j in boxes[i]) { if ( k++ ) s += ', '; s += j + ': '+boxes[i][j]; } s += "\n"; } alert(s); return false; }); }); </script> </head> <body> <div id="userbox" style="float:right;width:200px"> </div> <p style="margin:50px;"> <img id="myimage" src="b_1246622364p1.jpg" alt="" /> </p> <p id="coords"></p> <div id="main_links"> <a id="view" href="#">View</a> &nbsp; <a id="new" href="#">New</a> &nbsp; <a id="edit" href="#">Edit</a> &nbsp; &nbsp; &nbsp; <a id="save_all" href="#">Save All</a> </div> <div id="edit_links" style="display:none"> <a id="save" href="#">Save</a> <a id="cancel" href="#">Cancel</a> </div> </body> </html>