Am sure this must have been answered but I will ask as I have searched
I have implemented instafeed and it loads the images, also when I click show more, it loads the next set of images, then when I click it one more time it doesn't work
var loadButton = document.getElementById('load-more');
var userFeed = new Instafeed({
get: 'user',
userId: '???',
clientId: '???',
accessToken: '???',
resolution: "standard_resolution",
useHttp: "true",
template: '<a data-fancybox="images" data-caption="{{caption}}" href="{{image}}"><img class="fancybox" src="{{image}}" /></a>',
sortBy: 'most-recent',
limit: 12,
/*links:false,*/
target: "instafeed",
/*after: function() {
// disable button if no more results to load
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
}
}*/
});
// bind the load more button
/*loadButton.addEventListener('click', function() {
userFeed.next();
});*/
// bind the load more button
loadButton.addEventListener('click', function() {
userFeed.next();
});
userFeed.run();
below is my html
<div id="instafeed" class="row text-center"></div>
</section>
<section class="pt-medium pb-medium">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<a class="btn default large" id="load-more">Show More</a>
</div>
</div>
</div>
</section>
and css
#instafeed {
min-width: 100%;
margin: 0 auto;
overflow: auto;
}
#instafeed img {
width: 16.5%;
height: auto;
display: inline-block;
padding:2px;
opacity:0.8;
filter:alpha(opacity=80);
}
#instafeed img:hover {
opacity:1;
filter:alpha(opacity=100);
}
@media screen and (max-width: 468px)
{
#instafeed img {
width: 50%;
}
}
I know someone would have solved it and might not be much of a question but it doesn't hurt to help out
Thank you