0

これが私の質問です。ウェブサイトの 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}} &hearts;</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>

前もって感謝します!

4

1 に答える 1