Building Flickr Creative Commons Image Search

This entry was posted on Friday, October 7th, 2011 and is filed under apps, JavaScript, jQuery, JSON, Technology.

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

Filed Under: apps, JavaScript, jQuery, JSON, Technology