Giter Club home page Giter Club logo

instagram-infinite-scroll's Introduction

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

instagram-infinite-scroll's People

Contributors

ddknoll avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.