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.
Or copy and paste the code below this line:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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> |
Article written by Fergus McDowall
