Building Flickr Creative Commons Image Search

Flickr is very popular image hosting service by Yahoo. Flickr offers API Response for developers in JSON, REST, SOAP,PHP. So lets build a simple Flickr Image Search, we shall build a image search that searches creative commons image from Flickr.

Key Notes About Flickr API

We will use Flickr.photo.search (http://www.flickr.com/services/api/flickr.photos.search.html) for searching images. So necessary parameters are

So other optional parameters are
  • text:Text search returns the photos whose title, description or tags match the given text.
  • licence: Licence is another optional parameter using which we can filter images based on various licences.
  • For Complete List of parameter click here

Demo

Coding:-

In this example i have jQuery for retrieving photos from Flickr.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flickr Creative Common Search</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
</head>
<style>
body{
font-family: "Segoe UI", Tahoma, Verdana, Arial;
}
a{
border:none;
}
img{
border:none;
}
</style>
<body>
<p>
<script type="text/javascript"><!--
$(document).ready(function()
{

var limit=9;
$('#fsearch').click(function() {
$('#flick').empty();
    var fquery = $('input#flickbox').val();
var url='http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ff7330ccaa8ffd91d0c2e69c52a95c23&text='+fquery+'&license=1%2C2%2C3%2C4%2C5%2C6%2C7&format=json&jsoncallback=?';
$.getJSON(url,function (datas)
{
$.each(datas.photos.photo, function(i,datas)
{
if(i<limit)
{
var id=datas.id;
   var title=datas.title;
   var secret=datas.secret;
   var server=datas.server;
   var farm=datas.farm;
   var owner=datas.owner;
   var base=id+'_'+secret+'_s.jpg';
   var major=id+'_'+secret+'_z.jpg';
   var url= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+major;
   var img='http://farm'+farm+'.static.flickr.com/'+server+'/'+base;
   var html='<img class="fimg" src="'+img+'" mce_src="'+img+'" />';
   var urlz='http://www.flickr.com/photos/'+owner+'/'+id;
   var ttlink='<a href="'+urlz+'" mce_href="'+urlz+'" target="_blank">'+html+'</a>';   //var link='<a rel="flickr" title="'+ttlink+'" href="'+url+'" mce_href="'+url+'">'+html+'</a>';
   $(ttlink).appendTo("#flick");
}
else
return false;
});
});


});
$.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ff7330ccaa8ffd91d0c2e69c52a95c23&text=Donald+Duck&license=1%2C2%2C3%2C4%2C5%2C6%2C7&format=json&jsoncallback=?',function (datas)
{
$.each(datas.photos.photo, function(i,datas)
{
	if(i<limit)
	{
var id=datas.id;
   var title=datas.title;
   var secret=datas.secret;
   var server=datas.server;
   var farm=datas.farm;
   var owner=datas.owner;
   var base=id+'_'+secret+'_s.jpg';
   var major=id+'_'+secret+'_z.jpg';
   var url= 'http://farm'+farm+'.static.flickr.com/'+server+'/'+major;
   var img='http://farm'+farm+'.static.flickr.com/'+server+'/'+base;
   var html='<img class="fimg" src="'+img+'" mce_src="'+img+'" />';
   var urlz='http://www.flickr.com/photos/'+owner+'/'+id;
   var ttlink='<a href="'+urlz+'" mce_href="'+urlz+'" target="_blank">'+html+'</a>';
  // var link='<a rel="flickr" title="'+ttlink+'" href="'+url+'" mce_href="'+url+'">'+html+'</a>';
   $(ttlink).appendTo("#flick");
	}
	else
	return false;
});

});
});
// --></script>
<input id="flickbox" type="text" /> <a id="fsearch" href="#">Search</a></p>
<div id="flick" style="width:250px"></div>
</body>
</html>

You Might Also Like