更新中のサイトに統合されたinstagramフィードがあり、以前に使用したinstafeed.jsを使用しており、フィードを問題なく設定しましたが、ロードする[さらにロード]ボタンを統合しようとしています元の画像セットの下にさらに画像があります。
以前に別のサイトでこれを行ったことがあり、そのときとまったく同じコードを使用していますが、さらに読み込むボタンを機能させたくありません。どこが間違っているのかを見つけて解決策を見つけるのを手伝ってくれる人はいますか?
HTML:
<div class="instagramFeed row">
<div id="instafeed"></div>
<p id="mybutton">Load More...</p>
</div>
</div> <!-- end container three -->
CSS:
.instagramFeed {
padding-bottom: 40px;
border-bottom: 1px dotted #666666;
}
#instafeed {
position: relative;
width: 108%;
max-width: 108%;
z-index: 999;
}
#instafeed img {
position: relative;
width: 20%;
max-width: 100%;
margin-right: 4.5%;
margin-top: 4.5%;
}
#mybutton {
position: absolute;
z-index: 999;
}
JS:
var feed = new Instafeed({
target: 'instafeed',
get: 'tagged',
userId: 925022210,
tagName: 'justanotherinvegas',
accessToken: '925022210.467ede5.5d4dff89eb4c464392a859b27f8f43f5',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '12',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
resolution: 'standard_resolution'
});
// call feed.next() on button click
$('#mybutton').on('click', function() {
feed.next();
});
feed.run();