Question

这是我的问题。我正试图让我的网站的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>

提前致谢！

Answer 1

您的事件处理程序应在加载Instagram Feed后注册，因为<img>元素已动态加载并附加到#instafeed包装器，因此在页面加载时不会注册任何事件。

可以使用Feed元素的after选项注册您的活动：

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');
      }
      $( "#instafeed img" ).mouseover(function() {
        $( this ).css( "opacity", .3 );
      });
      $( "#instafeed img" ).mouseout(function() {
        $( this ).css( "opacity", 100 );
      });
    }
});

Instafeed.js上一个按钮

1 个答案: