Infinite Scrolling Paging

Question

Can anyone tell how to implement Infinite Scrolling Paging for $flickr->call('flickr.photos.search'); I've the user logged in and the first 10 set of photos. Now how to implement scrolling paging for remaining photos.

I am using * Flickr API Kit with support for OAuth 1.0a for PHP >= 5.3.0. And Codeigniter

Any Help would be appreciated....

Answer 1

Give unique id value for the div that contains the story in your design and use Jquery to Post the value to your controller using Ajax Post then retrieve next set of Flickr data. Once you've the results append it below the last div.

Your View Page looks like:

<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>

Your Jquery Scroll event looks like:

$('.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 view

<div class="flickr_myphotos" id="<?php echo $fli; ?>">
{your flickr photos here }
</div>