Neill Horsman Photo Tagging

well its been almost a year and I have only now started work on the photo tagger again.

With some new enhancements:

• Now working in IE 8. Haven’t had much time to test in IE 7 but I’m sure it wouldn’t take much effort.
• Tag title form now shows below the tagged area.
• Server side error checking.
• Slightly cleaner code (still have to finish it off)

You can view the demo here

and download the source removed

There is still one minor problem with the form, when you cancel your tag (click away from the tagged area) the form still displays in the top left corner.
I am working on this issue.

If anyone has an idea or fix I am happy to hear

More to come soon

if you are familiar with the photo tagging project I recently released you will know the Image Selection plug-in didn’t work in IE web browsers. After reading the authors website I have found there is a new version on the jQuery plug-in available (0.8).

I plan to update the photo tagging project this week to let all the IE users see this in action, but remember the better alternate is to download Firefox 3.5

I can drive like this :p

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="&lt;?php echo $x1; ?&gt;" />
<input id="y1" name="y1" type="hidden" value="&lt;?php echo $y1; ?&gt;" />
<input id="x2" name="x2" type="hidden" value="&lt;?php echo $x2; ?&gt;" />
<input id="y2" name="y2" type="hidden" value="&lt;?php echo $y2; ?&gt;" />
<input id="w" name="w" type="hidden" value="&lt;?php echo $w; ?&gt;" />
<input id="h" name="h" type="hidden" value="&lt;?php echo $h; ?&gt;" />
<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-&gt;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']."') ");
}
}
?&gt;

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="&lt;?php echo $name; ?&gt;" href="#"><span><strong>title; ?&gt;</strong></span></a></li>
 
</ul>
 
 
}
}
?&gt;

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. ]]> http://blog.neillh.com.au/2009/06/24/photo-tagging-project-with-jqueryphpmysqlcss-and-an-unordered-list/feed/ 22 http://blog.neillh.com.au/2009/01/22/bugatti-comes-to-australia/ http://blog.neillh.com.au/2009/01/22/bugatti-comes-to-australia/#comments Wed, 21 Jan 2009 15:01:29 +0000 Neill Horsman http://blog.neillh.com.au/?p=183 Trivett Group, Australia’s largest prestige automotive group raised the benchmark in automotive motoring yet again by adding the world’s fastest production car ever built to its stable of brands, becoming the exclusive authorised dealer for Bugatti Automobile in Australia…. Read full story here.

Now they fail to mention that the Buggati wont be road legal/registrable here or that it will cost somewhere between $2.7 and $3 Million dollars, but if you have the money for it I’m sure you could hire out any local race tracks a few times a week for some beyond amazing fun.

Now I just have to wait for the Koenigsegg to come to Australia and I will be one happy little boy.

Watch a video Review of the Bugatti at Sandown: The world’s fastest road car

Great little app for designers where you can create a project framework.

Are you tired of creating a new project folder, images folder, css files, linking in jquery.

This app asks you what items your project will need from css including a reset, jquery, images directory, project name, doc type etc, then lets you download a zipped file with folder structure complete.

Just extract in your web server directory and away you go.

No but i have been organising them neatly now and have a new bookmark folder named tools.

Over the years i have found sites that provide free services for web designers, anything from building a sitemap online to making a .htaccess file.

Here are my top 6 so far

1. Stripe Generator

For creating vertical, horizontal or diagonal stripes in any colour, width shadows etc, great for backgrounds or navigation’s, has come in handy many times and Ive passed the link out to a lot of other designer friends.

2. Ajax Loading Generator

Similar to Stripe Generator, this tool creates for you a loading animated gif, like the one you see here when you click an image in a post. You can select style, colour size, background or transparent, there’s lots of styles to choose from so check it out. In fact i should redo mine as its made for a white background.

3. Jeroen Wijering

Flash Video wizard, need to put a video up on your site that not on youtube, use this wizard to style a flash video player, give it a file name/location, to play on page load or wait, and it gives you all the code you need to drop into your CMS or HTML code. Easy as pie!

4. .htaccess .htpasswd

Ever need to password protect a website or sub folder, this is a wizard to build the Apache .htaccess files required, give it your desired user/pass name of the password protected area and path to the folder and it does the rest. Nice and quick.

5. Write Maps

When working with a client you don’t get to see often, sometimes a websites structure can get lost between emails, now when sending a proposal i create a new online sitemap for their website with this tool, allow sharing and include a link in the proposal, then can login, edit, add pages and names, and sign-off on the sitemap.

6. Kuler

I talked about this one eairler this week, Adobe Kuler colour schemes, browse or search through tons of user added colour schemes and download as a Adobe Photoshop swatch.

Thats all i have for now, have to get back to work.

There are tons more useful web servies and articals i have bookmarked, then i will talk about them next week.