4
<html>
<style>
img {max-height:125px; margin:3px; border:1px solid #dedede;}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// has API Key and the Gallery ID
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.flickr.com/services/rest/?method=flickr.galleries.getPhotos&api_key=bb22ea058037a72d15a51a405915524c&gallery_id=66911286-72157693718156901&format=json&nojsoncallback=1",
"method": "GET",
"headers": {}
}
$.ajax(settings).done(function (data) {
console.log(data);
$("#galleryTitle").append(data.photos.photo[0].title + " Gallery");
$.each( data.photos.photo, function( i, gp ) {
var farmId = gp.farm;
var serverId = gp.server;
var id = gp.id;
var secret = gp.secret;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret);
// https://farm1.staticflickr.com/490/20349556755_e181f04e6b_q.jpg
// The Photo URL
$("#flickr").append('<img src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/>');
});
});
</script>
<h2>National Pet Day</h2>
<div style="clear:both;"/>
<div id="flickr"/>
</body>
</html>