如何使用instafeed.js保留我的模板，但提取我的个人订阅源

Question

所以我终于完成了主页和公文包页面(目前)，并转到了一个我想加载我的instagram提要的页面。我喜欢的模板只拉"流行"页面的图片，当我更改它来拉我的图片时失败了。当我包含模板项时，用于拉取提要的代码将停止工作。他们为什么互相取消？

注意：即将发布大量代码。我会尽可能清楚地标记

CSS：

/* main content - instagram
------------------------------------------------------------------- */
#instafeed a {
padding:5px 5px 1px 5px;
margin:10px;
border:1px solid #e1e1e1;
display:inline-block;
border-radius: 4px;
position:relative;
}
#instafeed .likes {
background:rgba(222,89,135,0.8);
font-family:sans-serif;
font-size:1em;
position:absolute;
color:#ffffff;
right:5px;
top:5px;
left:5px;
opacity:0;
text-align:center;
line-height:150px;
text-shadow:0 1px rgba(0,0,0,0.5);
-webkit-font-smoothing:antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity:1;
}

HTML：

<div id="instafeed"></div>

提取"流行页面照片"的工作脚本

var feed = new Instafeed({
clientId: 'fae4f4b283b44eabbe4186ff9911ef65',
limit: 20,
sortBy: 'most-liked',
after: function () {
var images = $("@rbphotographs").find('a');
$.each(images, function(index, image) {
var delay = (index * 75) + 'ms';
$(image).css('-webkit-animation-delay', delay);
$(image).css('-moz-animation-delay', delay);
$(image).css('-ms-animation-delay', delay);
$(image).css('-o-animation-delay', delay);
$(image).css('animation-delay', delay);
$(image).addClass('animated flipInX');
});
},
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div     class="likes">&hearts; {{likes}}</div></a>'
});
feed.run();

将提取我的图像的工作脚本：

<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: myID,
accessToken: 'myToken'
});
userFeed.run();
</script>

我试着将两个功能合并在一起：

<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: my userID,
accessToken: 'myToken'
limit: 20,
sortBy: 'most-liked',
after: function () {
var images = $("@rbphotographs").find('a');
$.each(images, function(index, image) {
var delay = (index * 75) + 'ms';
$(image).css('-webkit-animation-delay', delay);
$(image).css('-moz-animation-delay', delay);
$(image).css('-ms-animation-delay', delay);
$(image).css('-o-animation-delay', delay);
$(image).css('animation-delay', delay);
$(image).addClass('animated flipInX');
});
},
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
});
});
userFeed.run();
</script>

但它没有起作用。取消的原因是什么？

Answer 1

我也遇到了同样的问题。您应该在{{image}}之前添加http:。

所以工作模板将是：

template: '<a href="{{link}}" target="_blank"><img src="http:{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'

更新：https://github.com/stevenschobert/instafeed.js/issues/75