Our last tutorial about the flickr API was an example on how-to search the flickr photo database for images using some short PHP code. This time we will use parts from the past tutorial together with some jQuery Ajax requests to show our photo search result without reloading the web page.

jQuery’s Ajax implementation

One of the most powerful jQuery functions is the Ajax function. The function provides enough options to make your XMLHttpRequest flexible enough to define;

• what type of response you need like to handle in your Ajax application (XML, JSON, HTML, script or text)
• an option about what the script need to do before the request is send (validations, set a pre-loading image, etc.)
• What to do after the request and response are successful
• and options like the request URL (f.e. your PHP script), the time-out value and more. Check the jQuery page for all available options.

The Ajax powered flickr image search

In this tutorial we will create a PHP script that will search the flickr database for posted values using the flickr API. On the client site we will use some simple HTML search form and some easy to understand jQuery Ajax code to handle the requests. If you like to test this tutorial code your should try our flickr Ajax search demo.

HTML search form

For this tutorial we create a simple form with only one search field and a button. Below the form we have a DIV container with ID result as placeholder for the images. Inside the header we need to include the latest jQuery library, download a copy from the jQuery website if you haven’t done yet.

<form>
	<div>
		<label>Enter keyword</label>
		<input type="text" name="search" id="search" value="" />
		<input type="button" name="submit" id="searchBtn" value="Search" />
	</div>					
</form>
<div id="result"></div>

jQuery Ajax functions

We use a click event to process the search if the user had clicked the forms button. Before we post the request to our PHP file getFlickr.php, we perform a test for the search field. If there is no search string we return to the document with an error message. Otherwise we send the posted value to our script for further processing. If the response is successful, we pass the data to our target container with the ID result.

$(document).ready(function(){
	$('#searchBtn').click(function() { 
		var searchVal = $('#search').val();
		$.ajax({
			type: 'GET',
			url: 'getFlickr.php',
			data: 'search=' + searchVal,
			dataType: 'html',
			beforeSend: function() {
				$('#result').html('<img src="loading.gif" alt="loading..." />');
				if(!searchVal[0]) {
					$('#result').html('<p>Please enter a keyword as search value.</p>');   	
					return false;
				} 	
			},
			success: function(response) {
				$('#result').html(response);
				tb_init('a.thickbox');
			}
		});
	});
});

PHP code for the flickr API

the following PHP snippet is based on the flickr API tutorial from the last. If you need information about the API methods, please check the previous tutorial.

<?php
class Flickr { 
	private $apiKey = 'YOUR_API_KEY'; 
	public function __construct() {
	} 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=12&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}
 
if (!empty($_GET['search'])) {
	$Flickr = new Flickr; 
	$data = $Flickr->search(stripslashes($_GET['search'])); 
	$html = '';
	if (!empty($data['photos']['total'])) {
		$html = '<p>Total '.$data['photos']['total'].' photo(s) for this keyword.</p>';	
		foreach($data['photos']['photo'] as $photo) { 
			$html .=  '
			<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg" alt="" />'; 
		}
	} else {
		$html = '<p>There are no photos for this keyword.</p>';
	}
	echo $html;
}
?>

In this script we accept only the POST GET values from the HTML form we have created. If the post GET var is empty we stop the script and shoot some default error, because the field validation was already done on the client side. Next we query the flickr API for the search value and if we have a positive result (getting some photos) we use a foreach loop to create the HTML code for the thumbnails (note the _s at the end of the image file name) At the end we echo the response in HTML format. Save this script under the getFlickr.php

If everything works fine and your search has returned some photos, you script should looks like this:

If you need more control on how your form and result should work, check the jQuery documentation. Maybe you like to use more animation effects for the results.
Similar Posts:

• Create custom reCAPTCHA images using their API
• jQuery Contact form for your website
• jQuery form plugin and PHP file uploads

The latest product from TemplateMonster is some new CMS with a stylish flash powered photo gallery front end. While the product is developed for the “non professional” webmaster are the CMS features really advanced. The gallery script looks a little like the bigger PHP photo galleries but there is need no for a database and the CMS has some nice features like:

• automatic thumbnail generation (loads much faster than resizing a photo using Flash’s jpg object)
• a PHP powered file upload
• an unlimited number of categories and photos for each category (only the load time is the limit)
• easy to modify descriptions for photo’s and categories
• The ability to modify all information and configuration via the text editor (if PHP is not available on the websites host)

The CMS looks very clean and doesn’t require a lot of HTML knowledge to manage any photo gallery listing. The price is maybe a little to high: Starting at $235 each license could be a little to to high for some webmasters. On the other site the front end looks very nice and would be an impression for every visitor!

Our partner finalwebsites.com (website is in Dutch language) is since a short time a TemplateMonster partner, maybe you like to take have quick look on these new Dynamic Photo Galleries.Similar Posts:

• Google Adsense Referrals 2.0 or continue with PPC ads?
• Get your Flash website high ranked at Google
• How-to choose a WordPress Hosting Provider