Quantcast
Viewing all articles
Browse latest Browse all 32

Instafeed.js Previous Button

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!


Viewing all articles
Browse latest Browse all 32

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>