将鼠标悬停在图片上时显示的Instagram点赞数
instagram likes count shown when hover the mouse on image
是否可以将Instagram喜欢的计数纳入我的instafeed?
我想看看得到这样的结果在这里输入图像描述
当鼠标悬停在图像上时,将出现类似计数,
在我的工作中需要添加哪些代码?:
$(document).ready(function(){
Instafeed.prototype._makeTemplate = function (template, data) {
var output, pattern, varName, varValue, _ref;
pattern = /(?:'#{2})(['w'[']'.]+)(?:'#{2})/;
output = template;
while (pattern.test(output)) {
varName = output.match(pattern)[1];
varValue = (_ref = this._getObjectProperty(data, varName)) != null ? _ref : '';
output = output.replace(pattern, "" + varValue);
}
return output;
};
//<a href="##link##"> // original image link
var feed = new Instafeed({
target: 'instafeed',
get: 'user',
userId: 8303117,
accessToken: '8303117.467ede5.360077337739443ab81ddc05f94ef38d',
tagName: '{{settings.instafeed_tags}}',
limit: 8,
links: true,
sortBy: 'most-recent',
clientId: '{{settings.instafeed_client_id}}',
resolution: 'standard_resolution',
template: '<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"></a></div>',
after: function() {
if (!this.hasNext()) {
}
},
before: function () {
$('#instafeed').empty();
},
});
$(document).find('.livery-instafeed-navigation').on('click', 'a', function (e) {
feed.next();
e.preventDefault();
});
feed.run();
/*userId: 8303117
accessToken: 8303117.467ede5.360077337739443ab81ddc05f94ef38d
*/
});
我自己做过。你可以使用{{likes}}来获得图片的喜欢数。你应该把它放在你的模板中。
替换:
<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"></a></div>
与这个:
<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"><div class="likes">{{likes}}</div></a></div>
并使用CSS将其放置在你想要的位置,隐藏它并在悬停时显示。
你可以在这里阅读更多关于模板的内容:https://github.com/stevenschobert/instafeed.js模板
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 显示某个用户ID的某个标签的30张Instagram图片
- 显示instagram图片
- 尝试在轮播中显示Instagram图像 - 如何仅在图像加载完成后加载轮播
- 如何在 javascript alert中显示 instagram API 响应
- Instagram API 和 jquery 的问题:无法显示项目
- 显示用户'网站上的Instagram照片
- Instagram传单在地图上显示照片
- Instagram API显示太多图片
- 将鼠标悬停在图片上时显示的Instagram点赞数
- Javascript Instagram API在浏览器中显示答案,而不是在JS中
- 在页面上显示URL的一部分(即Instagram访问令牌)
- 在iframe中嵌入instagram/youtube页面“;拒绝显示文档,因为X-Frame-Options禁止显示&