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>