javascript - Adding Pagination or Lazy Load to Instagram feed -

i'm working on instagram feed fashion campaign whereby users of instagram hash-tag photos common tag. script, based on instagram api, pulls recent posts common tag appear on web page.

obviously, instagram limits script 20 image requests have been looking way of either implementing pagination feature, or more preferably, ajax 'load more' button or lazy load plugin. similar feed @ http://blackrebelmotorcycleclub.com/media/ perfect.

if shed light on how might go this, brilliant. have limited knowledge when comes javascript , ajax, , lot of tutorials have come across don't go detail regarding actual implementation of code.

the current development can viewed @ www.lovedesignerglasses.com/ig-feed. have included instagram script below.

thanks!

javascript

<script type="text/javascript">     $.ajax({         type: "get",         datatype: "jsonp",         cache: false,         url: "https://api.instagram.com/v1/tags/sunglasses/media/recent?    access_token=415664389.bc04464.baabf071a76e48a191d4c6680f6a526a",         success: function(data) {             (var = 0; < 18; i++) {                 $(".tagged-photos").append("<li><a class='instagram-photo' target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.standard_resolution.url + "'></img></a></li>");             }         }     }); </script> 

html

<ul class="tagged-photos"> </ul> 

here example code supports pagination , lazy load. can find more information in this blog.

html:

<div class="instafeedbutton">     <button id="previous-feeds" class="btn-feed"><</button>     <button id="next-feeds" class="btn-feed">></button> </div> <br/><br/>                 <div id="instafeed" class="instagramfeed"></div> 

javascript:

var nextbutton = document.getelementbyid('next-feeds'); var previousbutton = document.getelementbyid('previous-feeds'); var imgs = [];                          // store images caching var currentpage = 1; var loadedpage = 1;         //data cached pages     if (currentpage < 2) {     previousbutton.setattribute('disabled', 'disabled'); } var feed = new instafeed({     get: 'tagged',     tagname: 'srilanka',     clientid: '467ede5a6b9b48ae8e03f4e2582aeeb3',     resolution: 'thumbnail',     limit: 5,     template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramimg"/></a>',     after: function () {         if (!this.hasnext()) {             nextbutton.setattribute('disabled', 'disabled');         }                 },     cachedprevious: function () { // read cached instagram data         var previousimages = imgs.slice((currentpage - 1) * feed.options.limit, (currentpage) * feed.options.limit);         $("#instafeed").html(previousimages);     },     cachednext: function () {   // read cached instagram data         var nextimages = imgs.slice((currentpage - 1) * feed.options.limit, (currentpage) * feed.options.limit);         $("#instafeed").html(nextimages);     },     success: function (data) {         var images = data.data;         var result;         (i = 0; < images.length; i++) {             image = images[i];             result = this._maketemplate(this.options.template, {                 model: image,                 id: image.id,                 link: image.link,                 image: image.images[this.options.resolution].url             });             imgs.push(result);         }     } });  // bind next button nextbutton.addeventlistener('click', function () {     $("#instafeed").fadeout(100);     $("#instafeed").empty();     $("#instafeed").fadein(100);     currentpage++;     if (currentpage > 1) {         previousbutton.removeattribute('disabled');     }      // if data not loaded , feed calling instagram api     if (currentpage > loadedpage) {         feed.next();         loadedpage++;     }     // if data not loaded , there rather calling api again      else                 feed.options.cachednext(); });  // data there before calling previous button, take cache previousbutton.addeventlistener('click', function () {     currentpage--;     $("#instafeed").fadeout(100);     $("#instafeed").empty();     $("#instafeed").fadein(100);     feed.options.cachedprevious();      if (currentpage < 2) {         previousbutton.setattribute('disabled', 'disabled');     } });  feed.run(); 

css:

.instagramimg{     height:148px;     width:148px;     padding: 0 3px 3px 0; }  .instagramfeed{     margin-top:5px;     min-height:440px; }  .instafeedbutton{     float:left; }  .instafeeddesc{     float:left; }  .btn-feed{     padding:2px 25px; } 

here have used instafeedjs javascript library allows feeds whenever need (lazy load) , have more control way need load feeds.