I'm building a pretty simple site that pulls images from a Flickr
photo set using their API and Request.JSONP. The site figures out how
many images will fit on a screen, adds a few more and makes my initial
request...which works fine. When a user scrolls down the page I want
to "lazy load" the next page of images. I'm using the ScrollSpy class
by David Walsh to detect when the user gets to the bottom of the page
and fire my request again. The request fires but something is wrong in
the response as all I get back is "Error: flickrData.photoset is
undefined". This only happens when I use variables to set both the
page number I'm requesting as well as the amount per page. For
example:
Gives error message on any request other than 1st:
this.request.send({
data: {
method: 'flickr.photosets.getPhotos',
api_key: 'API Key Goes Here',
photoset_id: '72157624479837539',
format: 'json',
nojsoncallback: '1',
page: this.page,
per_page: this.perPage
}
});
Works fine...but obviously loads the same data over and over
this.request.send({
data: {
method: 'flickr.photosets.getPhotos',
api_key: 'API Key Goes Here',
photoset_id: '72157624479837539',
format: 'json',
nojsoncallback: '1',
page: 1,
per_page: 42
}
});
Below is my full code. I left out the source for ScrollSpy to save
room seeing that's not an issue here. Any help or tips would be
greatly appreciated. I don't have a working sample up, but if anyone
needs one I can certainly post one up. Thanks.
var FlickrFeed = new Class({
Implements: [ Options ],
options: {},
initialize: function( options ) {
// Set options
this.setOptions( options );
// 240x179 LI element size
var winWidth = window.getSize().x - 40; // 40px
combined left/
right padding
var winHeight = window.getSize().y - 190; // 190px top padding
var perRow = Math.floor( winWidth / 240 );
var perScreen = Math.floor( winHeight / 179 );
this.spy = null;
// ScrollSpy Instance
this.page = 1;
// Default page number
this.perPage = perRow * perScreen + ( perRow * 3 ); //
Total per
page
this.request = new Request.JSONP({
url:
'http://api.flickr.com/services/rest/',
callbackKey:
'jsoncallback',
onComplete:
this.receiveData.bind( this )
});
// Time to fetch the data from the Flickr API
this.fetchData();
},
fetchData: function() {
this.request.send({
data: {
method: 'flickr.photosets.getPhotos',
api_key: 'API Key Goes Here',
photoset_id: '72157624479837539',
format: 'json',
nojsoncallback: '1',
page: this.page,
per_page: this.perPage
}
});
},
receiveData: function( response ) {
var flickrData = response;
var photos = flickrData.photoset.photo;
var total = flickrData.photoset.total;
var totalPages = flickrData.photoset.pages;
/*
HTML Structure
<li>
<a href="##"><img src="" width="240" alt="fpo"></a>
</li>
*/
photos.each( function( element, i ) {
var title = element.title;
var titleArray = title.split( ':' );
var thumbList = new Element ( 'li' );
var imageAnchor = new Element( 'a', {
'href': 'http://farm' + element.farm +
'.static.flickr.com/' +
element.server + '/' + element.id + '_' + element.secret + '.jpg',
'title': titleArray[0] + '::' +
titleArray[1],
'rel': 'lightbox[set1]'
});
var thumbImg = new Element( 'img', {
'width': '240',
'alt': element.title,
'src': 'http://farm' + element.farm +
'.static.flickr.com/' +
element.server + '/' + element.id + '_' + element.secret + '_m.jpg'
});
thumbImg.inject( imageAnchor );
imageAnchor.inject( thumbList, 'top' );
thumbList.inject( $( 'gallery' ) );
});
// Mediabox
//Mediabox.scanPage();
// Initialize ScrollSpy
this.initScrollSpy();
},
initScrollSpy: function() {
this.spy = new ScrollSpy({
container: window,
min: window.getScrollSize().y -
window.getSize().y - 100,
onEnter: function() {
// Increment page count
this.page++;
// Fetch the next page worth of images
this.fetchData();
}.bind( this )
});
}
});
var flickrFeed = null;
window.addEvent( 'domready', function() {
flickrFeed = new FlickrFeed();
});
