0

これは答えられているに違いないと確信していますが、検索したので質問します

私は instafeed を実装し、画像をロードします。また、[さらに表示] をクリックすると、次の画像セットがロードされ、もう一度クリックすると機能しません

   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();

以下は私の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>

と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%;

   }
}

私は誰かがそれを解決しただろうし、大した問題ではないかもしれないことを知っていますが、助けても害はありません

ありがとうございました

4

0 に答える 0