javascript - Instafeedjs moment.js return time ago -
using instafeedjs , moment.js render instagram feed , format dates relative format ( x days/months/hours/minutes ago ).
as see below, success function callback looping thru array separate images unique dom containers. portion works perfect, although, need obtain 'caption.created_date', gets little tricky include. can output unix timestamp pretty can't seem translate desired output, described above.
thank help.
var imgs = []; var feed = new instafeed({ limit: '12', get: 'user', userid: xxxxx, clientid: 'xxxxxxxxxxxxxxxxxxxx', accesstoken: 'xxxxx.xxxxx.xxxxx', limit: 20, resolution: 'standard_resolution', template: '{{model.created_time_ago}}<img src="{{image}}"/>', filter: function (image) { var imagedate = new date(parseint(image.created_time * 1000, 10)); var timeago = moment(imagedate).fromnow(); image.create_time_ago = timeago; return true; }, success: function (data) { // read feed data , create owr own data struture. var images = data.data; var result; (i = 0; < images.length; i++) { var image = images[i]; result = this._maketemplate(this.options.template, { model: image, id: image.id, link: image.link, caption: image.caption.text, created_time:image.caption.created_time, image: image.images[this.options.resolution].url }); imgs.push(result); } //split feed divs $("#gram1").html(imgs.slice(0, 1)); $("#gram2").html(imgs.slice(1, 2)); $("#gram3").html(imgs.slice(2, 3)); } }); feed.run();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://instafeedjs.com/js/instafeed.min.js"></script> <div id="gram1"></div> <div id="gram2"></div> <div id="gram3"></div>
ive solved using moment.js within success callback right after inserting html dom. moment obtaining hte unix timestamp data attribute ive inserted templates paragraph.
works charm!
var imgs = []; var feed = new instafeed({ limit: '12', get: 'user', userid: 1934632453, clientid: 'b4986d7624834f60a58c773bd4ccc5f3', accesstoken: '1934632453.467ede5.c8d670901ebe4229b293c9ff705810d3', limit: 20, resolution: 'standard_resolution', template: '<p data-unix="{{created_time}}" class="unix-time"></p><img src="{{image}}"/>', success: function (data) { // read feed data , create our own data struture. var images = data.data; var result; (i = 0; < images.length; i++) { var image = images[i]; result = this._maketemplate(this.options.template, { model: image, id: image.id, link: image.link, caption: image.caption.text, created_time:image.created_time, image: image.images[this.options.resolution].url }); imgs.push(result); } //split feed divs $("#gram1").html(imgs.slice(0, 1)); $("#gram2").html(imgs.slice(1, 2)); $("#gram3").html(imgs.slice(2, 3)); //convert time relative time ago. $(".unix-time").each(function(){ var time = moment.unix($(this).attr('data-unix')).fromnow(); $(this).append(time); }); } }); feed.run();
Comments
Post a Comment