Image tagging in PHP
index.php
<html>
<head>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/jquery.tag.js'></script>
<link media="screen" rel="stylesheet" href="css/jquery.tag.css" type="text/css" />
<link media="screen" rel="stylesheet" href="css/jquery-ui.custom.css" type="text/css" />
</head>
<body>
<?php $image_name="simp.jpg";?>
<img src="<?php echo $image_name;?>" id="img" />
<?php //set here current image id
$img_id="1";?>
</body>
<script>
$(document).ready(function() {
$("#img").tag ( {
//clickToTag: false,
//canTag:false,
//canDelete: false,
save: function(width,height,top_pos,left,label,the_tag) {
$.post("ajax.php",{'action':'save','img_id':<?php echo $img_id;?>,'width':width,'height':height,'top':top_pos,'left':left,'label':label},function(id) {
the_tag.setId(id);
});
},
remove: function(id) {
$.post("ajax.php",{'action':'delete','id':id});
}
});
$.getJSON("ajax.php",{'action':'list','img_id':<?php echo $img_id;?>},function(tags) {
$.each(tags, function(key,tag) {
$("#img").addTag(tag.width,tag.height,tag.top,tag.left,tag.label,tag.id);
});
});
});
</script>
</html>
ajax.php
<?php
/*
CREATE TABLE `picture` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
insert into `picture`(`img_id`,`name`) values (3,'alexander_the_great1.jpg'),(4,'black_holes.jpg'),(5,'lion-roaring.jpg'),(6,'M16Full.jpg'),(7,'picpower.jpg');
DROP TABLE IF EXISTS `tag`;
CREATE TABLE `tag` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`img_id` int(11) DEFAULT NULL,
`label` varchar(100) CHARACTER SET utf8 NOT NULL,
`width` int(11) NOT NULL,
`height` int(11) NOT NULL,
`top` int(11) NOT NULL,
`left` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
insert into `tag`(`id`,`img_id`,`label`,`width`,`height`,`top`,`left`) values (7,1,'testtest',100,100,31,75);
*/
mysql_connect("localhost","root","");
mysql_select_db("test");
switch($_REQUEST['action']){
case 'list':
$tags = array();
$img_id=$_REQUEST['img_id'];
$query = mysql_query("select * from tag where img_id=$img_id");
while($row = mysql_fetch_array($query)){
$tags[] = array("id"=>$row['id'],
"label"=>$row['label'],
"width"=>$row['width'],
"height"=>$row['height'],
"top"=>$row['top'],
"left"=>$row['left']);
}
echo json_encode($tags);
break;
case 'delete':
mysql_query("delete from tag where id = ".$_REQUEST['id']);
break;
case 'save':
mysql_query("insert into tag (`img_id`,`width`,`height`,`top`,`left`,`label`) values (
".$_REQUEST['img_id'].",
".$_REQUEST['width'].",
".$_REQUEST['height'].",
".$_REQUEST['top'].",
".$_REQUEST['left'].",
'".$_REQUEST['label']."'
)") or die(mysql_error());
echo mysql_insert_id();
break;
}
?>
Download here
index.php
<html>
<head>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/jquery.tag.js'></script>
<link media="screen" rel="stylesheet" href="css/jquery.tag.css" type="text/css" />
<link media="screen" rel="stylesheet" href="css/jquery-ui.custom.css" type="text/css" />
</head>
<body>
<?php $image_name="simp.jpg";?>
<img src="<?php echo $image_name;?>" id="img" />
<?php //set here current image id
$img_id="1";?>
</body>
<script>
$(document).ready(function() {
$("#img").tag ( {
//clickToTag: false,
//canTag:false,
//canDelete: false,
save: function(width,height,top_pos,left,label,the_tag) {
$.post("ajax.php",{'action':'save','img_id':<?php echo $img_id;?>,'width':width,'height':height,'top':top_pos,'left':left,'label':label},function(id) {
the_tag.setId(id);
});
},
remove: function(id) {
$.post("ajax.php",{'action':'delete','id':id});
}
});
$.getJSON("ajax.php",{'action':'list','img_id':<?php echo $img_id;?>},function(tags) {
$.each(tags, function(key,tag) {
$("#img").addTag(tag.width,tag.height,tag.top,tag.left,tag.label,tag.id);
});
});
});
</script>
</html>
ajax.php
<?php
/*
CREATE TABLE `picture` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
insert into `picture`(`img_id`,`name`) values (3,'alexander_the_great1.jpg'),(4,'black_holes.jpg'),(5,'lion-roaring.jpg'),(6,'M16Full.jpg'),(7,'picpower.jpg');
DROP TABLE IF EXISTS `tag`;
CREATE TABLE `tag` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`img_id` int(11) DEFAULT NULL,
`label` varchar(100) CHARACTER SET utf8 NOT NULL,
`width` int(11) NOT NULL,
`height` int(11) NOT NULL,
`top` int(11) NOT NULL,
`left` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
insert into `tag`(`id`,`img_id`,`label`,`width`,`height`,`top`,`left`) values (7,1,'testtest',100,100,31,75);
*/
mysql_connect("localhost","root","");
mysql_select_db("test");
switch($_REQUEST['action']){
case 'list':
$tags = array();
$img_id=$_REQUEST['img_id'];
$query = mysql_query("select * from tag where img_id=$img_id");
while($row = mysql_fetch_array($query)){
$tags[] = array("id"=>$row['id'],
"label"=>$row['label'],
"width"=>$row['width'],
"height"=>$row['height'],
"top"=>$row['top'],
"left"=>$row['left']);
}
echo json_encode($tags);
break;
case 'delete':
mysql_query("delete from tag where id = ".$_REQUEST['id']);
break;
case 'save':
mysql_query("insert into tag (`img_id`,`width`,`height`,`top`,`left`,`label`) values (
".$_REQUEST['img_id'].",
".$_REQUEST['width'].",
".$_REQUEST['height'].",
".$_REQUEST['top'].",
".$_REQUEST['left'].",
'".$_REQUEST['label']."'
)") or die(mysql_error());
echo mysql_insert_id();
break;
}
?>
Download here
Hi Amit,
ReplyDeleteThanks for your great document. I have integrated this with my code. But i don't know how to use this with multiple images on a page. Is it possible to do? If so how can I do this?
Thanks in advance for your help....
Just create an other image with different id and call the function tag as $("#New_image_id_here").tag (
ReplyDeletehi amit,
ReplyDeletei am using your code in my project but i want to add little discription also with the tag. how i can do this. plz guide me
.
Vinay, create a column "desc" in "tag" table and make a textbox. while saving the data send that textbox value in the "tag" table.
ReplyDeleteHallo Amit,
ReplyDeletethank you very much for this code. I want to connect it with a existing user- and photo database. But for the first i try it, with your demo code, and it works.
But not always. Sometime i get an error "alert from webpage. wrong object". And not tag is shown or possible to take.
I tried to understand your code: The table "tag" is for the tags. But table picture?
Can you help me?
Tank you very much.
Ronny,
Deletefor picture table use listed below table structure:
CREATE TABLE `picture` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
Hello Amit,
ReplyDeleteThanks a lot for your tagging code.
But Some times i get the wrong object alert when i run in browser and i wont be able to see tag icons.
Please help me in this issue.
Thanks
Priya
Priya,
Deletewhich browser you are using?
the download link is not working.please provide a working link.
ReplyDeleteNike,
ReplyDeleteJust copy the code and paste it... the site is down.
Hi Amit..
ReplyDeleteThe download link is not working. Can you please provide me the zip file. So I can try this.
Please send me the zip on
Deletesunny.phpdeveloper101@gmail.com
Thanks
Sunny, just copy and paste the above code. this code also will work fine.
Deletehi please the is not work !!
ReplyDeletewhat is the problem you are facing?
Deletecan u send me the jquery and css files of it at irfan.majeed90@gmail.com plz thanks
ReplyDeleteThis comment has been removed by the author.
DeleteProperty Dubai
Deletehi
ReplyDeletecan you upload tag.js file??
thanks