OK, so I've been trying and looking around for a couple of days now, so I'll just ask here and see if anyone can help me solve/understand this :)
I'm getting pictures from a facebook album
function fbImgGalDisplay_func() {
//FB pageID and access token + history image gallery
$FBmain_imgGalID = 'ID_OF_GALLERY';
$FBaccess_token = 'MY_ACCESS_TOKEN';
//Get the JSON
$json_FBimgGal = @file_get_contents('https://graph.facebook.com/' . $FBmain_imgGalID . '/photos?limit=5&access_token=' . $access_token);
//Interpret data
$FBimgGal = json_decode($json_FBimgGal);
// open container for wall posts
echo '<div id="masContainer">';
foreach ($FBimgGal->data as $img ){
echo '<div class="fbImgGal_Img">';
echo '<img src="' . $img->source . '" />';
echo '</div>';
}
// close container for wall posts
echo '</div>';
if($FBimgGal->paging){
echo '<div value="' . $FBimgGal->paging->next . '" class="loadMoreBtn">THERE ARE MORE PICTURES</div>'; //$fbdata->paging->next;
}
}
So far, all good. I get images on the page. BUT, there are around 250 pictures in this album. I've tried increasing the limit, but it seems as though the Graph API has a limit of 100 (no matter what I put in the limit). So I was thinking that this is an excellent time to try and learn how to implement some sort of "infinite scroll" effect (so, when the user scrolls down, images keep appending to the existing masonry wall).
I tried this in jQuery (it requires the user to click the button, just for testing now)
$('.loadMoreBtn').click(function(){
var nextVal = $('.loadMoreBtn').attr('value');
$.ajax({
url: nextVal,
type: "GET",
success: function(data){
$.each( data, function(i, img){
console.log( img.source );
});
console.log( nextVal );
},
error: function(xhr, status, error){
console.log('there was an error');
}
});
});
But for some reason, when clicking the div, I can't get any data (other then 2 undefined in the console.log. The next link works).
What I was thinking was that when user clicks the div, the ajax sends the GET and uses success respons to keep populating the gallery.
Any help on this is greatly appreciated (and very needed! haha). Or if there is some better way of doing this? I'm open to suggestions... The idea here is to eventually add a window scroll to check the bottom offset, and THEN execute the "load more" (until there isn't a "next" URL in the respons).
*EDIT/SIDENOTE Is this the best way, from a security stand point, to do this? Considering that by using this technique, I have to pass the access token in the value (in the URL). So for a "nosy nelly", they could grab the access token... maybe not the best thing? :P
