Quantcast
Viewing latest article 23
Browse Latest Browse All 32

instafeed does not load all images on second click

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


Viewing latest article 23
Browse Latest Browse All 32

Trending Articles