Skip to content

A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.

Notifications You must be signed in to change notification settings

DDKnoll/Instagram-Infinite-Scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

033bcb2 · Jul 30, 2016

History

41 Commits
May 16, 2014
May 13, 2014
Jun 9, 2014
May 14, 2014
Jun 9, 2014
May 14, 2014
May 20, 2014
May 14, 2014
Jul 30, 2016
May 20, 2014

Repository files navigation

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

About

A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published