javascript - Instafeed.js - Sortby most-liked when 60+ images -


i using instafeed.js display instagram images on homepage.

i got 1000+ images sortby most-liked , load 60 @ time.

when use "sortby: most-liked" looks instafeed.js loads 60 recent images , sort these 60 most-liked. when load next 60 images next 60 recent images , these sorted liked.

it looks not posible sort 1000+ images most-liked. , load 60 @ time?

is how instafeed.js works? or bug?

 <script type="text/javascript">   var feed = new instafeed({    sortby: 'most-liked',     get: 'tagged',    tagname: 'awesome',    clientid: 'your_client_id'   });  feed.run(); </script> 

kind regards

as know, instafeed supports load max of 60 images. there way load more images , display them requested , need little bit of code work.

for first need follow following steps;

  1. call feed.next() store data until reach 1000 images. - call "after" callback of instafeed.
  2. sort images using counts - need have our own compare function.
  3. create template show images.
  4. finally slice data (60 out of 1000) , display in div.

var nextbutton = document.getelementbyid('next-feeds');      var imgs = [];							// store images caching      var images = [];      var currentpage = 1;        var feed = new instafeed({          get: 'tagged',          tagname: 'ajith',          clientid: '467ede5a6b9b48ae8e03f4e2582aeeb3',          resolution: 'thumbnail',          limit: 60,          mock: true,          template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramimg"/></a><label>liked <b>{{model.likes.count}}</b> people</label>',          cachednext: function () { 	// read cached instagram data              var nextimages = imgs.slice((currentpage - 1) * feed.options.limit, (currentpage) * feed.options.limit);              $("#instafeed").html(nextimages);          },          after: function () {              if (images.length < 300)              {                  feed.next();              }              else              {                  var result;                  images.sort(compare);                  (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,                          likecount: image.likes.count                      });                      imgs.push(result);                  }                  var imgsperpage = imgs.slice((currentpage - 1) * feed.options.limit, (currentpage) * feed.options.limit);                  $("#instafeed").html(imgsperpage);              }          },          success: function (data) {              images.push.apply(images, data.data);          }      });        feed.run();        // bind next button      nextbutton.addeventlistener('click', function () {          $("#instafeed").fadeout(100);          $("#instafeed").empty();          $("#instafeed").fadein(100);          currentpage++;            feed.options.cachednext();      });        function compare(a, b) {          // alert(a.likes.count);          if (a.likes.count < b.likes.count)              return -1;          if (a.likes.count > b.likes.count)              return 1;          return 0;      }
<script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="instafeedbutton">  <button id="next-feeds" class="btn-feed">next</button>  </div>  <br/> <br/>                  <div id="instafeed" class="instagramfeed"></div>

if want add pagination, can find info here here


Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

android - CollapsingToolbarLayout: position the ExpandedText programmatically -

Listeners to visualise results of load test in JMeter -