javascript - instafeed.js - 使用过滤器进行限制
javascript - instafeed.js - Limit with filters
我正在使用 instafeed.js 从 Instagram 加载一些照片,我有一个小功能可以加载 feed,将特定标签设置为过滤器。像这样:
function generateFeed(category){
var feed = new Instafeed({
target: category+'Feed',
get: 'user',
userId: 'USERID',
accessToken: 'TOKEN',
sortBy: 'most-recent',
template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
limit: '12',
resolution: 'standard_resolution',
filter: function(image) {
return image.tags && image.tags.indexOf(category) >= 0;
},
after: function(){
if (!this.hasNext()) {
$('.load-button').hide();
}else{
$('.load-button').show();
}
}
});
feed.run();
$('.load-button').on('click',function(){
feed.next();
});
}
一切正常,但似乎 limit(在本例中为 12)不是加载照片的限制,而是搜索标签时获取照片的限制.
并且如果在此限制内没有带有该标签的照片,如果此照片存在并带有该标签,则 Feed 也将为空!
有办法处理吗?要在按过滤器搜索时将限制设置为最大 (60)?
如果 limit 可以从 feed.next() 函数传递,那将很容易,但我还没有发现任何有效的方法。
谁能帮帮我?
谢谢。
您应该将 limit
设置设置为更高的值,并手动限制 filter
函数内的最大结果量。
为了在对 .next()
的调用中保持此行为,您应该在每次加载 Feed 时重置计数器:
function generateFeed(category){
var currentCount = 0;
var feed = new Instafeed({
target: category+'Feed',
get: 'user',
userId: 'USERID',
accessToken: 'TOKEN',
sortBy: 'most-recent',
template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
limit: '60',
resolution: 'standard_resolution',
before: function() {
currentCount = 0;
},
filter: function(image) {
// put your real limit here
var shouldDisplay = (currentCount < 12);
if (shouldDisplay) {
if (image.tags && image.tags.indexOf(category) >= 0) {
currentCount += 1;
} else {
shouldDisplay = false;
}
}
return shouldDisplay;
},
after: function(){
if (!this.hasNext()) {
$('.load-button').hide();
} else{
$('.load-button').show();
}
}
});
feed.run();
$('.load-button').on('click', function(){
feed.next();
});
}
请记住,如果您的 API 客户端在 Sandbox Mode,无论您将 limit
设置为什么,您的通话都限制为 20 个项目,因此这可能影响不大给你。
我正在使用 instafeed.js 从 Instagram 加载一些照片,我有一个小功能可以加载 feed,将特定标签设置为过滤器。像这样:
function generateFeed(category){
var feed = new Instafeed({
target: category+'Feed',
get: 'user',
userId: 'USERID',
accessToken: 'TOKEN',
sortBy: 'most-recent',
template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
limit: '12',
resolution: 'standard_resolution',
filter: function(image) {
return image.tags && image.tags.indexOf(category) >= 0;
},
after: function(){
if (!this.hasNext()) {
$('.load-button').hide();
}else{
$('.load-button').show();
}
}
});
feed.run();
$('.load-button').on('click',function(){
feed.next();
});
}
一切正常,但似乎 limit(在本例中为 12)不是加载照片的限制,而是搜索标签时获取照片的限制.
并且如果在此限制内没有带有该标签的照片,如果此照片存在并带有该标签,则 Feed 也将为空!
有办法处理吗?要在按过滤器搜索时将限制设置为最大 (60)?
如果 limit 可以从 feed.next() 函数传递,那将很容易,但我还没有发现任何有效的方法。
谁能帮帮我?
谢谢。
您应该将 limit
设置设置为更高的值,并手动限制 filter
函数内的最大结果量。
为了在对 .next()
的调用中保持此行为,您应该在每次加载 Feed 时重置计数器:
function generateFeed(category){
var currentCount = 0;
var feed = new Instafeed({
target: category+'Feed',
get: 'user',
userId: 'USERID',
accessToken: 'TOKEN',
sortBy: 'most-recent',
template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
limit: '60',
resolution: 'standard_resolution',
before: function() {
currentCount = 0;
},
filter: function(image) {
// put your real limit here
var shouldDisplay = (currentCount < 12);
if (shouldDisplay) {
if (image.tags && image.tags.indexOf(category) >= 0) {
currentCount += 1;
} else {
shouldDisplay = false;
}
}
return shouldDisplay;
},
after: function(){
if (!this.hasNext()) {
$('.load-button').hide();
} else{
$('.load-button').show();
}
}
});
feed.run();
$('.load-button').on('click', function(){
feed.next();
});
}
请记住,如果您的 API 客户端在 Sandbox Mode,无论您将 limit
设置为什么,您的通话都限制为 20 个项目,因此这可能影响不大给你。