File: index3.html

Recommend this page to a friend!
  Classes of Igor Crevar  >  icfb Photo Tag  >  index3.html  >  Download  
File: index3.html
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:
Date: 7 years 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>