https://github.com/DDKnoll/Instagram-Infinite-Scroll

A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.
https://github.com/DDKnoll/Instagram-Infinite-Scroll

Last synced: 13 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/DDKnoll/Instagram-Infinite-Scroll
• Owner: DDKnoll
• Created: 2014-05-11T21:29:27.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-07-30T01:58:50.000Z (over 8 years ago)
• Last Synced: 2024-08-01T22:53:50.411Z (3 months ago)
• Language: JavaScript
• Size: 225 KB
• Stars: 68
• Watchers: 10
• Forks: 19
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [Instagram Infinite Scroll](http://ddknoll.github.io/Instagram-Infinite-Scroll/)

[Demo](http://ddknoll.github.io/Instagram-Infinite-Scroll/)

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:

	

    {{#instagramData.data:index}}

		


			

		

	{{/instagramData.data}} 


Sample Usage:

    

     

    

    //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

      });

    });

    

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