Super Fast Image Search with JSON, JQuery and Flickr

Here is a way to build up a really simple image search application using HTML, CSS and JQuery. One thing that can be improved about most image search apps is that browsing search history is sloooow.

This image search app provides a neat solution to the history/speed issue by simply displaying results in a push-pop stack. As you type in new search terms, the image thumbnails are prepended to the resultset. Your search history stays on the page, but is simply pushed further down as new thumbnails appear. Its is really fast and simple to browse your image search history.

Also, this search app operates entirely in 30 lines of HTML and JavaScript by using a JSON feed to the flickr API. Simple and elegant.

Click here for the demo

Or copy and paste the code below this line:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Comperio Super Simple Image Search</title>
  </head>
  <body>
    Search for <b>cats, dogs, cakes</b>, or anything else that takes your fancy :-)
    <br />
    <input id="searchterm" />
    <button id="search">search</button>
    <div id="results"></div>
    <script>
      $("#search").click(function(){
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
          tags: $("#searchterm").val(),
          tagmode: "any",
          format: "json"
        },
        function(data) {
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).prependTo("#results");
            if ( i == 10 ) return false;
          });
        });
      });
    </script>
  </body>
</html>

<html>

<head>

<title>Comperio Super Simple Image Search</title>

</head>

<body>

Search for <b>cats, dogs, cakes</b>, or anything else that takes your fancy :-)

<br />

<button id="search">search</button>

$("#search").click(function(){

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",

{

tags: $("#searchterm").val(),

tagmode: "any",

format: "json"

function(data) {

$.each(data.items, function(i,item){

$("<img/>").attr("src", item.media.m).prependTo("#results");

if ( i == 10 ) return false;

});

</script>

</body>

</html>

Search Nuggets by

Blogging about search as the solution

Super Fast Image Search with JSON, JQuery and Flickr

Related Posts

Article written by Fergus McDowall

Leave a response

Moved Permanently

Subscribe

Recent Posts

Recent Comments

Tags

OSLO

STOCKHOLM