これが私の質問です。ウェブサイトの Instagram フィードを機能させようとしています。Instafeed.js です。前のボタンを機能させようとしています。「前のボタン」が Instafeed.js で使用された例を見てきました: http://codepen.io/stevenschobert/pen/iHxfw。
現在のサイトでは、Instagram の写真を取得し、次のボタンは機能しますが、前のボタンが機能せず、JavaScript エラーがあるようです。たとえば、次のような CSS を使用するとします。
#instafeed img:hover {opacity: .3;}
うまく機能しますが、jQuery を使用すると機能しません。そのような:
$(‘#instafeed img’).click(function(){
$(this).css(“opacity”, .3);
});
Instafeed.js にアクセスするために使用する JavaScript コードを次に示します。
var instaInfo = '<span class="text"><p><b>{{likes}} ♥</b> Likes <br> {{comments}} Comments</p><a class="fancybox" href="{{link}}" target="_blank"><img src="{{image}}" /></a></span>';
var loadButton = document.getElementById('load-more');
var feed = new Instafeed({
get: 'tagged',
tagName: 'signalcity',
clientId: '528ab0876c9f4db8889acc36da952b4f',
limit: 4,
links: 'true',
resolution: 'standard_resolution',
template: instaInfo,
sortBy: 'most-recent',
after: function() {
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
}
}
});
feed.run();
次のボタンと前のボタンは次のとおりです。
$('.next').click(function(){
$('#instafeed img, .text p').hide();
feed.next();
});
$('.prev').click(function(){
$('#instafeed img, .text p').hide();
feed.previous();
});
HTMLは次のとおりです。
<div id="instafeed">
<div id="instaClick">
<a class="next"><h5>NEXT >></h5></a>
<a class="prev"><h5><< PREVIOUS</h5></a>
</div>
</div>
前もって感謝します!