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 here

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
Grab the source code here

We will start with creating a table to store all the image information in

1
2
3
4
5
6
7
8
9
10
11
12

 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

1
2
3
4
5
6
7
8

 <!-- Include jQuery and the image area select js -->
 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.imgareaselect-0.7.min.js" type="text/javascript"></script>
</html>
 
<strong>2.</strong> add an image to your document.
<pre lang="html" line="1">
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

 
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5

#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
Grab the source code 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/commercial project, modify or redistribute.
Send me an email if you find a use for it, or a better way to do everything.

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

They are a bunch of great designers from around the U.S all working for some top notch agency’s over there with many years experience like myself.

If you’re curious to see what other’s in this industry think of your work you can submit your site and they do a great write up on it in general or in detail if you submit certain areas.

So today I got a tweet (@critme) from them with a link to the write up on my site.

Cautiously I started reading fearing the worst :p No not really, I was very excited to hear from other professionals, and what they wrote was great.

Some of the things mentioned (Footer, Home page portfolio) I had only been thinking about changing/adding this week.

All in all I think it was a great idea and a great free services, it has driven a lot of traffic to my site and given me some new ideas.

I couldn’t thank them more.

If you want your site reviewed, whether you’re a designer or have your own online business, jump on Please Critique Me.

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.

Not that I’m against the social network scene but the reason was i just have too many logins and accounts floating all over the place.

So today I decided to see what it was.

Flock is basically Firefox….. but uses twice as much ram again if you know what i mean.

Included in the browser we have a social side bar, where once logged in (or signed up) to all our favourite social media sites we can view all of them together in a simple yet effective view. When i say view them I mean.

• Status updates
• Friends online
• New wall posts
• New Digg stories
• Twitter friends and posts
• Youtube videos
• etc..

You can also post to your own social sites and blog… all from the browser..

In fact I am blogging to my new wordpress.com blog from the flock interface as we speak.

So what are the pro’s and cons.

I am going to start with the negative first because  it is a big problem and has been for sometime, and now will be further more, and that is memory. Flock is based on Mozilla technology, which is great don’t get me wrong, the only reason i have IE6 and 7 is to test my web designs to make sure they work.. i am and always will be a Firefox user. but we all know Firefox is a memory hog, and now with flock just adding on all these social tool bars and sidebars… you can imagine what it is like

Now i haven’t had a chance to see what extensions work or don’t work with it so i cant comment there yet, hopefully I can add in all my favourite web extensions and have Flock just like my Firefox, but then i guess we will see the memory usage spike some more.

As for Pro’s

the social interface is lovely, works well, although it is bloated with options and features, it feels very lite and easy which is what i love. everything is where it should be and works like it always has.

Final say: I would open flock every other day to have a play, but at the end of the day if i open face book in Firefox, its going to work without using 200-300meg of ram.

The costs of the applications, set to reach consumers in October, haven’t changed since CS3, but remain hefty. Should longtime users upgrade?

Of course that depends on the specific tools you need. However, we suspect that only the most well-heeled will jump at the chance, as CS4 shares the majority of tools with its predecessor. Perhaps more dramatic, life-changing alterations will come with the next Creative Suite. That said, time-saving tweaks to Illustrator and Flash in particular could lure professionals immersed in them to upgrade.

With CS4, Adobe aimed to unify the interfaces of more than a dozen applications, including Flash and other former properties of Macromedia. You’ll see similar pull down menus for toggling among workspaces that you can customize, as well as Flash-based panels that nicely snap open and shut. Corporate design departments will find plenty of enhancements for their teams to share work more quickly.

Adobe continues to improve integration among the applications. After Effects, as only one example, can import Photoshop 3D layers and export content directly into Flash.

Options for working with high-definition video and mobile content expand too, with support for the latest formats as well as for making Adobe AIR applications. Among other highlights:

Photoshop CS4 will use your computer’s graphics chip for the first time, while offering support for 64-bit Windows.

At long last, you can handle more than one project at a time in Illustrator, thanks to the new multiple Artboards feature.

Flash CS4 has a rebuilt animation model, so you can make objects move on the stage in two quick steps. And Flash introduces a new, XML-based file format.

Dreamweaver provides plenty of shortcuts to CSS coding, including within the Properties panel.

We’ve been toying with the beta code of CS4 for several weeks. Check out our first take reviews and videos of the six suites and their individual applications for more details. We’ll report back with rated reviews after working with the final code.

Taken from cnet.com