Put it in jsfiddle.net, and paste back the link.
O.
On Mar 26, 2011, at 11:06 PM, Brandon wrote:
> 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();
> });
