Login   Register  
Icontem

File: index2.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Igor Crevar  >  icfb Photo Tag  >  index2.html  >  Download  
File: index2.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:
Date: 2013-08-25 11:05
Size: 2,704 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 } ); 
			
			$('#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;
			});
			$('#save').click(function(){
				$('#main_links').show();
				$('#edit_links').hide();
				
				if ( obj.icfbPhotoTag.isNew() ){
					$.icSelectionBox( { url:'getusers.php?friend=1',
						onOkClick:function(users, el, searchValue){
							if ( !users.length ) return false;
							var user = users[0];
							//set new title/id, 
							obj.icfbPhotoTag.setTitleOfLast(user.title).setIdOfLast(user.id);
							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();
				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>
  	
		<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>