Skip to content

Instantly share code, notes, and snippets.

@applesaucesome
Created June 24, 2013 15:54
Show Gist options
  • Save applesaucesome/5851106 to your computer and use it in GitHub Desktop.
Save applesaucesome/5851106 to your computer and use it in GitHub Desktop.
flickr feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Flickr</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var flickr,flickrLength,flickImg,jsonurl,jsonurltwo,searchTerm,farmId,serverId,photoId,secretId,imgType,imgTitle,pageLink,lnktxt,createHrLine,currPage,p,query,tagQuery,tagMode;
query = 'puppy,candy,cats';
tagQuery = 'puppy,candy,cats';
tagMode = 'all';
picsPerPage = '5';
currPage = 1;
function callMorePhotos(p){
$.ajax({
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags='+query+'&tag_mode='+tagMode+'&page='+currPage+'&per_page='+picsPerPage+'&format=json&jsoncallback=?',
/*url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags='+tagQuery+'&tag_mode='+tagMode+'&page='+currPage+'&per_page='+picsPerPage+'&format=json&jsoncallback=?',*/
dataType: 'jsonp',
data: JSON,
success: function(data){
flickr = data.photos;
flickrLength = flickr.photo.length;
document.body.appendChild(document.createElement('hr'));
document.body.appendChild(document.createTextNode('Page'+p));
document.body.appendChild(document.createElement('hr'));
for(var i=0; i<flickrLength; i++){
farmId = flickr.photo[i].farm;
serverId = flickr.photo[i].server;
photoId = flickr.photo[i].id;
secretId = flickr.photo[i].secret;
imgTitle = flickr.photo[i].title;
flickImg = document.createElement('img');
flickImg.title = imgTitle;
flickImg.src = 'http://farm'+farmId+'.staticflickr.com/'+serverId+'/'+photoId+'_'+secretId+'_m.jpg';
document.body.appendChild(flickImg);
}
}
});
currPage++;
}
$(document).ready(function(){
callMorePhotos(currPage);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
callMorePhotos(currPage);
}
});
});
</script>
</head>
<body>
<div id="myDiv">&nbsp;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment