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

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.

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.

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

A friend of mine approached me over facebook while i was doing some in your face advertising on there

He works for a new company named gettaclue, they attend a lot of Sydney’s clubs, pubs and events, writing reviews taking photos talking to the crowd etc and then write up articles and newsletters on whats hot and whats not..

Currently that site is just a basic landing page where you can submit your name/email to receive updates on the sites launch, once we launch it with the new look and feel, you will be able to read reviews on everything in Sydney, and even find photos of yourself.. I am hoping to go a step further and build a Web 2.0 Social side to it..

Members profiles, tagging and commenting on photos, discussion board, something where everyone can figure out who they met the night before and find them on here and make a fun environment for people…

More later!

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.

Opened up some old designs that never kicked off and saw something id been wanting to use for awhile but haven’t had the chance yet, so included that.

Still nothing was coming together, so started working on a logo, which didn’t match the ideas i already had. played with colours some more, but just wasn’t working……

*bangs head on desk*

So then i noticed sitting on my desktop, and VERY cool Adobe AIR app i always forget about somehow

KULER!!!!

Kuler is a guy from adobe, that developed a flash colour picking platform… i know i know, doesn’t sound that great. but it really is, and when you use it through Adobe AIR….. ITS GREAT

Kuler lets people find colour schemes that work well and then post them to the site in a very nice to use flash app, with great search function. Once your colour scheme is up there, people can vote for it, comment on it and download it as a Photoshop Swatch (ASE) so you can use it over and over again.

Adobe Kuler

So now i can rest easy knowing I’m making progress on this site. Hey who knows, may even post it on here

Thanks Adobe & Kuler