Facebook Style Image Grabber
I love the way Facebook works, there are so many subtly clever gizmos that just make it all work that little bit smoother. One feature I particularly like is the image grabber. For those that don't know, if you enter a URL while writing a private message in Facebook, the site cleverly goes off to the URL and grabs all the images it can find for you. You can then select the image you want to include alongside your message. It's a really sweet use of Ajax; subtle and very effective.
This gave me the idea to develop a similar tool for use with our social shopping site. You can see the script in action below. It's a simplified version of the code in production, but it works ok as a demo.
Grab an Item Demo
Please enter the URL for the item you want to grab.
Be aware, depending on the item, this can take a couple of minutes...
How it works
It's all pretty simple once you break it down. You just have to perform each step one at a time and before you know it you've got a pretty fancy end result.
The grabber comprises 2 main parts. The first is the form asking the user to enter the URL of their choice. We then use a link to trigger the javascript function goGetIt(). This function uses the jQuery Ajax library to make a call to a PHP script which does all the hard work for us, then returns us the result in a manageable format for presentation to the user.
Here's the function with comments.
function goGetIt() {
// I have standard show and hide functions which simply show and hide
// layers based on their ids.
show('grab_loading');
hide('grab_item_form');
hide('enter_url_form');
var add_url_value = escape(document.getElementById('add_url').value);
document.getElementById('grab_link').value = document.getElementById('add_url').value;
jQuery.ajax({
type: "POST",
url: "ajax/go_get_it.php",
data: "add_url="+add_url_value,
success: function(msg){
// If we are sent an error response then show it
if (msg.match(/^error:.+/)) {
myErrors = msg.split(/:/)
document.getElementById('grab_item_error').innerHTML=myErrors[1];
hide('grab_loading');
} else {
hide('grab_loading');
show('grab_item_form');
hide('grab_item_error');
show('enter_url_form');
var bits = msg.split('|');
var title = bits.shift();
var description = bits.shift();
if (title!='undefined') {
document.getElementById('grab_title').innerHTML = title;
}
if (description!='undefined') {
document.getElementById('grab_description').innerHTML = description;
}
var image = bits[0];
var outputString='';
for(var n=0;n<bits.length;n++) {
// Output another element
if (n>0) {
// Hide all the images apart from the first one
outputString += "<img src=\""+bits[n]+"\" id=\"preview_image_"+n+"\" class=\"hidden\" style=\"max-width:320px\" />";
} else {
outputString += "<img src=\""+bits[n]+"\" id=\"preview_image_"+n+"\" style=\"max-width:320px\" />";
}
}
document.getElementById('preview_image_holder').innerHTML = outputString;
document.getElementById('num_preview_images').value = bits.length;
document.getElementById('current_image').value = 0;
document.getElementById('grab_image').value = bits[0]; // Default it to the first image to start
if (bits.length==0) {
// We don't need the image_nav_bar
hide('image_nav_bar');
document.getElementById('preview_image_holder').innerHTML = 'no suitable image found';
} else if (bits.length<=1) {
// We don't need the image_nav_bar
hide('image_nav_bar');
}
}
}
});
return;
}
The Clever Bit: go_get_it.php
As you can see from the example above we just use a simple call to the jQuery AJAX code which in turn calls our php script.
Dealing with the Response
Now we have sent and received our response from the PHP script we need to display the response and allow the user to select the image they want to use from those returned.
You can see how we deal with the response in the goGetIt() function, but we also need a couple more functions to browse through the images, as shown below.
/**
* Show the next image
*/
function nextImage() {
num_preview_images = document.getElementById('num_preview_images').value;
next_image = parseInt(document.getElementById('current_image').value)+1;
if (next_image>=num_preview_images) {
next_image=0; // Set to the start of the images array
}
for (var n=0;n<num_preview_images;n++) {
if (n==next_image) {
show('preview_image_'+n);
} else {
hide('preview_image_'+n);
}
}
document.getElementById('current_image').value = next_image;
document.getElementById('grab_image').value = document.getElementById('preview_image_'+next_image).src;
}
/**
* Show the previous image
*/
function prevImage() {
num_preview_images = document.getElementById('num_preview_images').value;
prev_image = parseInt(document.getElementById('current_image').value)-1;
if (prev_image<0) {
prev_image=num_preview_images-1; // Set to the end of the images array
}
for (var n=0;n<num_preview_images;n++) {
if (n==prev_image) {
show('preview_image_'+n);
} else {
hide('preview_image_'+n);
}
}
document.getElementById('current_image').value = prev_image;
document.getElementById('grab_image').value = document.getElementById('preview_image_'+prev_image).src;
}
The Final Result
That's pretty much it, you have to put it all together, add in a few little touches like the loading image which you can generate online, and you have a handy image grabber.
View the source of this page if you want to see more of the inner-workings. I wouldn't want to make life too easy for you, it just takes away the satisfaction in the end. ;)
Send any comments you want via our contact form on just comment on the blog!
