Instafeed.js Previous Button

Question

Here’s my question. I’m trying to get my website’s Instagram feed to work. It is Instafeed.js. I’m trying to get the previous button to work. I’ve seen an example where a “previous button” was used with Instafeed.js: http://codepen.io/stevenschobert/pen/iHxfw.

On my current site I get the Instagram photos, and my next button works, but my previous button doesn’t work and there seems to be a JavaScript error. For example, if I use CSS such as:

#instafeed img:hover {opacity: .3;}

It works great, but if I use jQuery, it doesn’t work. Such as:

$(‘#instafeed img’).click(function(){
    $(this).css(“opacity”, .3);
});

Here is the JavaScript code I use to access Instafeed.js:

            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();

Here’s my next and previous buttons:

            $('.next').click(function(){
                $('#instafeed img, .text p').hide();
                feed.next();
            });
            $('.prev').click(function(){
                $('#instafeed img, .text p').hide();
                feed.previous();
            });

Here’s the HTML:

    <div id="instafeed"> 
        <div id="instaClick">
            <a class="next"><h5>NEXT >></h5></a>
            <a class="prev"><h5><< PREVIOUS</h5></a>
        </div>
    </div>

Thanks in advance!

Answer 1

Your event handlers should be registered once the instagram feed is loaded because your <img> element is dynamically loaded and appended to the #instafeed wrapper then no event will be registered upon page loading.

It could be possible to register your event in using the after option of the feed element:

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 );
      });
    }
});