Skip to content

Instantly share code, notes, and snippets.

@aresnick

aresnick/flickrExample.html

Created July 5, 2016 22:37
Show Gist options
  • Save aresnick/4342c03dda4b7e278cef7c2225bdb821 to your computer and use it in GitHub Desktop.
Save aresnick/4342c03dda4b7e278cef7c2225bdb821 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flickrExample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
box-shadow: 2px 2px 5px #555;
background-size: contain;
height: 100px;
}
</style>
</head>
<body>
<div id='photo'>
</div>
<script>
var tags = ['dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers', 'dogs', 'cats', 'flowers'];
var getURLforTag = function(tag) {
return 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=da8050167028611d0706c5bebf0268c8&tags=' + tag + '&per_page=30&format=json&nojsoncallback=1';
};
var getPhotoURL = function(farm, server, id, secret) {
return "http://farm" + farm + ".static.flickr.com/" + server + "/" + id + "_" + secret + "_m_d.jpg";
};
var addImgFromJSON = function(photo) {
var img = document.createElement('img');
img.src = getPhotoURL(photo.farm, photo.server, photo.id, photo.secret);
document.body.appendChild(img);
}
tags.forEach(function(tag) {
var url = getURLforTag(tag);
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(json) {
var photo = json.photos.photo[Math.floor(Math.random() * 30)];
addImgFromJSON(photo);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment