Search Nuggets » Flickr http://blog.comperiosearch.com A blog about Search as THE solution Mon, 13 Jun 2016 08:59:45 +0000 en-US hourly 1 https://wordpress.org/?v=3.9.40 Super Fast Image Search with JSON, JQuery and Flickr http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/ http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/#comments Wed, 14 Mar 2012 11:36:02 +0000 http://nuggets.comperiosearch.com/?p=860 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>

]]> http://blog.comperiosearch.com/blog/2012/03/14/super-simple-image-search-json-jquery-flickr/feed/ 0