Instagram Infinite Scroll

Demo

Instagram Infinite Feed

The Instagram feed uses Ractive to render a mustache html template with instagram image data.

How to Use:

1. Create an instagram developer account and Client ID for your application.
2. Include the Ractive.js and instagram.js scripts.
3. Create a mustache template.
4. Pass the Client ID, hashtag to search, and template string into the instagramFeed constructor.

Example Template:

<!-- This loops over the data --> {{#instagramData.data:index}} 	<div class="insta-image"> 		<img src="{{instagramData.data[index].images.standard_resolution.url}}" alt="" /> 	</div> {{/instagramData.data}}  

Sample Usage:

<script src="js/ractive/Ractive-legacy.0.3.9.min.js"></script><!-- Get Ractive--> <script src="js/instagram.js"></script> <!-- Get Instagram extension --> <script> //Check URL for search parameter. query = (window.location.search.length ? window.location.search.slice(1) : 'dribbble');  //Infinite Scroll Window Bindings. var infiniteScrollBinding = function(){   $(window).scroll(function(evt){          //Calculate Window Values on every scroll event.     var bod = $('body')[0];     pageHeight = bod.offsetHeight;     bottomScroll = window.scrollY + bod.clientHeight;     distanceToBottom = pageHeight - bottomScroll;      //Load more posts as needed.     if(distanceToBottom < 200){       insta.load('after');     }     else if(window.scrollY <= 0){       insta.load('before');     }   }); }  // Get our template file. $.get( 'templates/twitter-feed.rac').then( function ( template ) {    //Create New Instagram Feed   insta = new instagramFeed({     el: 'template-target',     template: template,     clientID: 'Your Instagram Client ID',     hashtag: query,     complete: infiniteScrollBinding   });  }); </script> 

Function Reference

insta.load('replace'); // Replace the current data (Reload) insta.load('before');  // Check for newer posts insta.load('after');   // Load Older Posts insta.set('search', 'yolo'); //Set Value of Search insta.get() //Inspect the Data 

TODO:

1. Minify JS
2. Generate more query urls (search users, locations, etc.)
3. Finish Documentation
4. Develop Testing Framework