Infinite paging scrolling
Can anyone tell me how to implement Infinite Scrolling Paging to call $ flickr-> ('flickr.photos.search'); I registered a user and the first 10 photos. Now, how to implement paging scrolling for the remaining photos.
I am using * Flickr API with OAuth 1.0a support for PHP> = 5.3.0. And Codeigniter
Any help would be appreciated ...
source to share
Give a unique id value to the div that contains the story in your design and use JQuery to send the value to your controller using an Ajax Post, then get the following Flickr dataset. After the results are added below the last div.
Your view page looks like this:
<div class="flickr_container">
<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>
<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>
.........
</div>
The Jquery Scroll event looks like this:
$('.container').bind('scroll', function(){
if($(".container").scrollTop() + $(".container").innerHeight()>=$(".container")[0].scrollHeight)
{
var LastDiv = $(".flickr_myphotos:last");
var LastId = $('.flickr_myphotos').last().attr('id');
var dataString = 'LastId='+ LastId ;
if(dataString){
$.ajax({
type: "POST",
url: "{ Controller here }",
data: dataString,
cache: false,
success: function(html){
LastDiv.after(html);
});
}
And your controller function:
$parameters = array('user_id' => {USER ID HERE} ,'per_page' => 10,'page' => $page);
$result = $flickr->call('flickr.photos.search', $parameters);
Place the result in the view
<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>
source to share