1 <style> 2 body { 3 min-width:357px; 4 overflow-x:hidden; 5 } 6 7 img { 8 margin:5px; 9 border:2px solid black; 10 vertical-align:middle; 11 width:75px; 12 height:75px; 13 } 14 </style> 15 16 <script> 17 var req = new XMLHttpRequest(); 18 req.open( 19 "GET", 20 "http://api.flickr.com/services/rest/?" + 21 "method=flickr.photos.search&" + 22 "api_key=90485e931f687a9b9c2a66bf58a3861a&" + 23 "text=hello%20world&" + 24 "safe_search=1&" + // 1 is "safe" 25 "content_type=1&" + // 1 is "photos only" 26 "sort=relevance&" + // another good one is "interestingness-desc" 27 "per_page=20", 28 true); 29 req.onload = showPhotos; 30 req.send(null); 31 32 function showPhotos() { 33 var photos = req.responseXML.getElementsByTagName("photo"); 34 35 for (var i = 0, photo; photo = photos[i]; i++) { 36 var img = document.createElement("image"); 37 img.src = constructImageURL(photo); 38 document.body.appendChild(img); 39 } 40 } 41 42 // See: http://www.flickr.com/services/api/misc.urls.html 43 function constructImageURL(photo) { 44 return "http://farm" + photo.getAttribute("farm") + 45 ".static.flickr.com/" + photo.getAttribute("server") + 46 "/" + photo.getAttribute("id") + 47 "_" + photo.getAttribute("secret") + 48 "_s.jpg"; 49 } 50 </script> 51
