Also to note:
You could pass in a number into the load function and load different content, you don't always have to load the same thing over and over, that was just for the example.
<html>
<head>
<style type="text/css">
#flickr {
height:600px;
overflow-x:hidden;
width:800px;
}
.flickr_results, .loading {
padding:10px;
border-radius:5px;
background:#eee;
color:#555;
margin:10px;
font-family:helvetica;
font-size:11px;
font-weight:bold;
}
.loading {
background:#000;
color:white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var loading = true;
function loadFlickr() {
var url = "http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&photoset_id=72157619415192530&format=json&jsoncallback=?";
$.getJSON(url, function(data) {
var photos = data.photoset.photo;
$.each(photos, function(i,photo) {
var title = photo.title;
$("#flickr").append("<div class='flickr_results'>"+title+"</div>");
});
// once we've loaded
// kill the loading stuff
loading = false;
$(".loading").remove();
});
}
$(function() {
// load initial photos
loadFlickr();
// scroll event of the main div
$("#flickr").scroll(function() {
// get the max and current scroll
var curScroll = $(this)[0].scrollTop;
var maxScroll = $(this)[0].scrollHeight - $(this).height();
// are we at the bottom?
if( (curScroll == maxScroll) && loading == false) {
// when you start, set loading
loading = true;
// add the loading box
$("#flickr").append("<div class='loading'>Loading...</div>");
// scroll to the bottom of the div
$(this)[0].scrollTop = $(this)[0].scrollHeight - $(this).height();
// load more photos
loadFlickr();
}
});
});
</script>
</head>
<body>
<div id="flickr">
</div>
</body>
</html>
Dude, i've learned a lot from you lately, ever since i discovered your youtube's videos I was hooked on some techniques you've showed us.
ReplyDeleteThanks a lot man, keep up the good work
Thanks for sharing :)
ReplyDeleteHey Sean, you obviously know a whole lot more than I do about this kind of stuff and I appreciate you sharing. I was wondering if you knew how to do this in conjunction in a php sql call instead flickers API? Any help you can give would be awesome.
ReplyDeleteThanks!
Sure, instead of using $.getJSON to get the flickr API, you would use $.post and call your PHP page. There you would connect to your mysql database and load content. You would need to make sure to pass in your current row, so you could get constantly get NEW data from mysql, using the LIMIT clause.
DeleteHey Sean,
ReplyDeleteMy $("#flickr").scroll(function() is never invoked while scrolling. Any ideas why?
This comment has been removed by the author.
ReplyDelete