A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.
JavaScript CSS HTML
Latest commit 033bcb2 Jul 30, 2016 @DDKnoll committed on GitHub Create privacy_policy.md
Permalink
Failed to load latest commit information.
css Updated mobile CSS May 16, 2014
font Added icons and minor aesthetic improvements. May 13, 2014
js user search should now work. Jun 9, 2014
templates Adding better documentation May 14, 2014
test user search should now work. Jun 9, 2014
About-Ractive.md getting documentation ready for presentation May 14, 2014
README.md adding functionality for searching by user id, location, and popular. May 20, 2014
index.html
privacy_policy.md Create privacy_policy.md Jul 30, 2016
search.md adding functionality for searching by user id, location, and popular. May 20, 2014

README.md

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