24 Jun, 2009
Photo Tagging Project with jQuery/PHP/MySQL/CSS and an unordered list
Posted by: Neill Horsman In: business|design|Technology
A few months back I worked on a project that required photo tagging. The project got scraped but I am still developing most of the functionality for future work.
The requirement for this particular project was for a photo gallery grouped into albums, with photos consisting mainly of people out on the town. I wont go into full details but here is how you tag a static image.
View the demo here
We will start with creating a table to store all the image information in
CREATE TABLE phototags ( id int(255) NOT NULL AUTO_INCREMENT, photoid int(11) NOT NULL, title varchar(255) NOT NULL, x1 int(11) DEFAULT NULL, y1 int(11) DEFAULT NULL, x2 int(11) DEFAULT NULL, y2 int(11) DEFAULT NULL, width int(11) DEFAULT NULL, height int(11) DEFAULT NULL, PRIMARY KEY (id) );
*photoid can be used later to implement into a photo gallery
1. First include the required .js
<!-- Include jQuery and the image area select js --> <script src="js/jquery-1.3.2.min.js" type="text/javascript"><!--mce:2--></script> <script src="js/jquery.imgareaselect-0.7.min.js" type="text/javascript"><!--mce:3--></script> <strong>2.</strong> add an image to your document. <pre lang="html"><img id="imageid" src="images/image.jpg" alt="Our image" />
*note we need to give it an ID which will correspond with out jQuery selector.
3. Now the jQuery
//Create some vars to hold the x/y info when selecting areas of the image var $x1, $y1, $x2, $y2, $w, $h; function selectChange(img, selection) { $x1.text(selection.x1); $y1.text(selection.y1); $x2.text(selection.x2); $y2.text(selection.y2); $w.text(selection.width); $h.text(selection.height); //load the x/y/width/height into hidden text boxes $('input#x1').val(selection.x1); $('input#y1').val(selection.y1); $('input#x2').val(selection.x2); $('input#y2').val(selection.y2); $('input#w').val(selection.width); $('input#h').val(selection.height); } $(document).ready(function () { $x1 = $('#x1'); $y1 = $('#y1'); $x2 = $('#x2'); $y2 = $('#y2'); $w = $('#w'); $h = $('#h'); }); //here is where we tell jQuery what image the area select will appear on. $(window).load(function () { $('img#imageid').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange, outerOpacity: 0.4, handles: true }); $('.imgareaselect-handle').css('opacity', 0.7); });
In the above code, we inclued jQuery files, made an image with an ID, told jQuery to use that image for the image area select, and set up some other bits to later store this information in a database.
4. Now we need to store the x/y/width/height into some hidden text boxes, lets create a form
<form action="index.php" method="post"> <!-- Grab the X/Y/Width/Height --> <input id="x1" name="x1" type="hidden" value="<?php echo $x1; ?>" /> <input id="y1" name="y1" type="hidden" value="<?php echo $y1; ?>" /> <input id="x2" name="x2" type="hidden" value="<?php echo $x2; ?>" /> <input id="y2" name="y2" type="hidden" value="<?php echo $y2; ?>" /> <input id="w" name="w" type="hidden" value="<?php echo $w; ?>" /> <input id="h" name="h" type="hidden" value="<?php echo $h; ?>" /> <input name="title" size="30" type="text" /> <input name="form" type="hidden" value="submit" /> <input class="send" type="submit" value="Submit" /> </form> [/code] <strong>5.</strong> Then we can connect to out mysql database and insert all this information [code lang="php"] // mysql('localhost', 'yourUsername', 'yourPassword', 'yourDatabase'); $db = new mysqli('localhost', 'user' ,'pass', 'db_name'); // If user has submitted a tag, insert into database if(!$db) { // Show error if we cannot connect. echo 'ERROR: Could not connect to the database.'; } else { if(isset($_REQUEST['form'])) { $query = $db->query(" INSERT INTO phototags (id, title, x1, y1, x2, y2, width, height) " . " VALUES('', '".$_POST['title']."', '".$_POST['x1']."', '".$_POST['y1']."', '".$_POST['x2']."', '".$_POST['y2']."', '".$_POST['w']."', '".$_POST['h']."') "); } } ?>
6. Now we need to get the coordinates from the database to make up our imagemap using an ul.
if(!$db) { // Show error if we cannot connect. echo 'ERROR: Could not connect to the database.'; } else { //database select $query = $db->query(" SELECT id, title, x1, y1, x2, y2, width, height FROM phototags "); while ($result = $query ->fetch_object()) { //take the title for the tag and replace all spaces with a - to name the css class $name = str_replace(' ', '-', $result->title); ?> <!-- create a CSS class with the title name from our tag --> <!-- #map a. { top:px; left:px; width:px; height:px; } --><!-- create a UL with the CSS class --> <ul id="map"> <li><a class="<?php echo $name; ?>" href="#"><span><strong>title; ?></strong></span></a></li> </ul> } } ?>
7. Now for some CSS to show the title for the tag
#map { margin:0; padding:0; width:400px; font-family:arial, helvetica, sans-serif; font-size:8pt; } #map li { margin:0; padding:0; list-style:none; } #map li a { position:absolute; display:block; background:url(images/blank.gif); text-decoration:none; } #map li a span { display:none; text-decoration:none; } #map li a:hover span { position:relative; display:block; left:10px; top:120px; padding:5px; border:1px solid #000; background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8; }
View the demo here
This is my first tutorial so if its a bit hard to follow I am sorry, have a look at the source, its rather straight forward.
Feel free to use this for any personal project.
Send me an email if you find a use for it, or a better way to do everything.
. It works in safari, google chrome, firefox just unluckily not in IE. Why do microsoft always have to be different? 
, what the f*ck!
