Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Retrieves clickable thumbnails for a Flickr photoset. When clicked starts a photoslider. Requires bootstrap, jquery, lightbox. Flickr API reqiures an api key and user id for most REST calls.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/lightbox/css/lightbox.css" rel="stylesheet">
</head>
<body>
<!-- photos are places here -->
<div class="container-fluid">
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/lightbox/js/lightbox.min.js"></script>
<script>
var flickrAPI = "https://api.flickr.com/services/rest/";
$.getJSON(flickrAPI, {
method: "flickr.photosets.getPhotos",
api_key: "{API_KEY}",
user_id: "{FLICKR_USER_ID}",
photoset_id: "{PHOTOSET_ID}",
format: "json",
nojsoncallback: "1"
}
).done(function(data) {
$.each(data.photoset.photo, function(i, p) {
$('<img>', {
class: 'img-thumbnail',
src: 'https://farm' + p.farm + '.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '_q.jpg',
}).appendTo($('<a>', {
title: p.title,
href: 'https://farm' + p.farm + '.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '_z.jpg',
'data-lightbox': "mygallery"
}).appendTo('.container-fluid'));
});
}).fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Request Failed: " + err);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment