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