Instagram Infinite Feed
The Instagram feed uses Ractive to render a mustache html template with instagram image data.
How to Use:
Example Template:
<!-- This loops over the data -->
{{#instagramData.data:index}}
<div class="insta-image">
<img src="https://github.com/DDKnoll/Instagram-Infinite-Scroll/raw/master/{{instagramData.data[index].images.standard_resolution.url}}" alt="" />
</div>
{{/instagramData.data}}
Sample Usage:
<script src="https://github.com/DDKnoll/Instagram-Infinite-Scroll/raw/master/js/ractive/Ractive-legacy.0.3.9.min.js"></script><!-- Get Ractive-->
<script src="https://github.com/DDKnoll/Instagram-Infinite-Scroll/raw/master/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: