Quantcast
Channel: Active questions tagged instafeedjs+jquery+javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 32

Instafeed.js Previous Button

$
0
0

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>