1<style> 2body { 3 min-width:357px; 4 overflow-x:hidden; 5} 6 7img { 8 margin:5px; 9 border:2px solid black; 10 vertical-align:middle; 11 width:75px; 12 height:75px; 13} 14</style> 15 16<script> 17var req = new XMLHttpRequest(); 18req.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); 29req.onload = showPhotos; 30req.send(null); 31 32function 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 43function 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
