Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using the Flickr API in Javascript

Thursday, April 4th, 2013 by Servage

This is a little playtime with the Flickr API for Javascript coding :-) Flickr supports a lot of API including to view images, to search image which I am going to use in this tutorial. For further details on Flickr APIs check http://www.flickr.com/services/api/

Today what I am going to do is write a small code allowing us to search for images using Flickr API’s based on the specific tag word entered by the user.
So first we are going to see how we are going to set up our java scripts with in the body tag.

This API allows us to make use of  jQuery

<div>
  <h1>jQuery API</h1>
  <p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></p>
</div>

Show a picture
Next with in the body tag we define our show picture function.
The var pic= $(“#box”).val() stores the value of the text box attributed as “box” by using the .val() function, later in the code the value in the pic is passed on to the tag parameter in the url.

The getJSON() method is used to get JSON data using an AJAX HTTP GET request. $.getJSON() function takes three arguments first is the URL for the Flickr API, second is the optional data that is to be sent to the server ( not used in this case), third is the optional data that is to be received usd in this case by making a method function(data) where each image is appended to the div named “images”.
$(“#images”).hide().html(data).fadeIn(‘fast’) is used to hide the images

<div>
  <h1>Show Picture Function</h1>
  <p>
  <script type="text/javascript">

  function showpics(){

    var pic= $("#box").val();
    $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags='
      +pic+"&tagmode=any&format=json&jsoncallback=?",
      function(data){ $("#images").hide().html(data).fadeIn('fast');

    $.each(data.items, function(i,item) {
      $("<img/>").attr("src", item.media.m).appendTo("#images");
    });
  })
};
  </script>
</p>
</div>

Search page
Now we design the layout for our search page. I am going to keep it very simple
The <input id=”Button” title=”show” onclick=”showpics()” type=”button” value=”show”> corresponds to a button with onclick functionality taking it to out function showpics(). The <div id=”images”></div> is the location where the images are appended

<div>
  <h1>Browser Page Layout</h1>
  <p>
    <p>Enter the image you want to enter </p>
    <input id="box" type="text">
    <input id="Button" title="show" onclick="showpics()" type="button" value="show">
    <div id="images"></div>
  </p>
</div>

This is just a basic get to know of how to search images using Flickr APIs. This is just the tip of the ice-berg. You can in corporate various java plugins along with the Flickr API to make amazing stuff. Slide shows, animations and a lot of other plugins are there online free of cost, all you have to do is just add them to your code and be innovative.

Using the Flickr API in Javascript, 4.2 out of 5 based on 10 ratings
Categories: Guides & Tutorials

Keywords: , , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.