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

1

一旦加载了 instagram 提要，就应该注册您的事件处理程序，因为您的<img>元素是动态加载并附加到#instafeed包装器的，然后在页面加载时不会注册任何事件。

可以使用afterfeed 元素的选项来注册您的事件：

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 );
      });
    }
});
于 2014-11-18T10:40:51.823 回答