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;
- call feed.next() store data until reach 1000 images. - call "after" callback of instafeed.
- sort images using counts - need have our own compare function.
- create template show images.
- 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
Post a Comment