File: index3.html

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

Contents

Class file image Download
<html> <head> <title></title> <meta content=""> <link rel="stylesheet" type="text/css" href="icfbphototag.css"></link> <link rel="stylesheet" type="text/css" href="selectionbox/icselectionbox.css"></link> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="icfbphototag.js"></script> <script type="text/javascript" src="selectionbox/icselectionbox.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} ); for (i in _boxes){ addHoverLink(_boxes[i].id, _boxes[i].title); } $('#view').click(function(){ if ( $('#users').is(':visible') ){ obj.icfbPhotoTag.view(); $('#users').hide(); } else{ obj.icfbPhotoTag.cancel(); $('#users').show(); } return false; }); $('#edit').click(function(){ $('#main_links').hide(); $('#edit_links').show(); $('#users').hide(); obj.icfbPhotoTag.edit(); return false; }); $('#new').click(function(){ $('#main_links').hide(); $('#edit_links').show(); $('#users').hide(); obj.icfbPhotoTag.add(); return false; }); $('#save').click(function(){ $('#main_links').show(); $('#edit_links').hide(); $('#users').show(); if ( obj.icfbPhotoTag.isNew() ){ $.icSelectionBox( { url:'getusers.php?friend=1', onOkClick:function(users, el, sInput){ if ( !users.length ) return false; var user = users[0]; //set new title/id, obj.icfbPhotoTag.setTitleOfLast(user.title).setIdOfLast(user.id); addHoverLink( user.id, user.title ); obj.icfbPhotoTag.save(); return true; }, onCancelClick:function(el){ obj.icfbPhotoTag.cancel(); return true; } } ); } else{ obj.icfbPhotoTag.save(); } return false; }); $('#cancel').click(function(){ $('#main_links').show(); $('#edit_links').hide(); $('#users').show(); 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; }); function addHoverLink(_id,title){ var mainSpan = $('<span> &nbsp;</span>').appendTo($('#users')); var a = $('<a></a>').attr('href','#').appendTo(mainSpan).html(title); var d = $('<a></a>').attr('href','#').appendTo(mainSpan).html('(x)'); a.hover( function(e){ obj.icfbPhotoTag.displayBoxes(false); //hide all obj.icfbPhotoTag.displayBox( _id, true ); //display one with id _id },function(){ obj.icfbPhotoTag.displayBoxes(false); //hide all }); d.click( function(e){ obj.icfbPhotoTag.removeBoxById(_id); $(this).parent().remove(); return false; }); $('#users').append(mainSpan); } }); </script> </head> <body> <p style="margin:50px;"> <img id="myimage" src="b_1246622364p1.jpg" alt="" /> </p> <div id="users"></div> <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>