Adding Pagination or Lazy Load to Instagram feed

Question

I'm working on an Instagram feed for a fashion campaign whereby users of Instagram will hash-tag their photos with a common tag. The script, which is based on the Instagram API, then pulls all recent posts with this common tag to appear on the web page.

Obviously, Instagram limits the script to 20 image requests so I have been looking into a way of either implementing a pagination feature, or more preferably, an ajax 'load more' button or the Lazy Load plugin. Something similar to the feed at http://blackrebelmotorcycleclub.com/media/ would be perfect.

If anybody could shed some light on how I might go about this, that would be brilliant. I have limited knowledge when it comes to Javascript and Ajax, and a lot of the tutorials that I have come across don't go into much detail regarding the actual implementation of the code.

The current development can be viewed at www.lovedesignerglasses.com/ig-feed. I have also included the instagram script below.

Thanks!

Javascript

<script type="text/javascript">
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/sunglasses/media/recent?    access_token=415664389.bc04464.baabf071a76e48a191d4c6680f6a526a",
        success: function(data) {
            for (var i = 0; i < 18; i++) {
                $(".tagged-photos").append("<li><a class='instagram-photo' target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.standard_resolution.url + "'></img></a></li>");
            }
        }
    });
</script>

HTML

<ul class="tagged-photos">
</ul>

Answer 1

Here is some example code that supports Pagination and Lazy Load. You can find more information in this blog.

HTML:

<div class="instaFeedButton">
    <button id="previous-feeds" class="btn-feed"><</button>
    <button id="next-feeds" class="btn-feed">></button>
</div>
<br/><br/>                
<div id="instafeed" class="instagramFeed"></div>

JavaScript:

var nextButton = document.getElementById('next-feeds');
var previousButton = document.getElementById('previous-feeds');
var imgs = [];                          // store the images for caching
var currentPage = 1;
var loadedPage = 1;         //data cached pages    
if (currentPage < 2) {
    previousButton.setAttribute('disabled', 'disabled');
}
var feed = new Instafeed({
    get: 'tagged',
    tagName: 'srilanka',
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    resolution: 'thumbnail',
    limit: 5,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramImg"/></a>',
    after: function () {
        if (!this.hasNext()) {
            nextButton.setAttribute('disabled', 'disabled');
        }            
    },
    cachedPrevious: function () { // read the cached instagram data
        var previousImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(previousImages);
    },
    cachedNext: function () {   // read the cached instagram data
        var nextImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(nextImages);
    },
    success: function (data) {
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            image = images[i];
            result = this._makeTemplate(this.options.template, {
                model: image,
                id: image.id,
                link: image.link,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
    }
});

// bind the next button
nextButton.addEventListener('click', function () {
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    currentPage++;
    if (currentPage > 1) {
        previousButton.removeAttribute('disabled');
    }

    // if the data is not already loaded , get the feed by calling instagram api
    if (currentPage > loadedPage) {
        feed.next();
        loadedPage++;
    }
    // if the data is not already loaded , get it from there rather than calling api again 
    else        
        feed.options.cachedNext();
});

// the data will be always there before calling previous button, so take it from cache
previousButton.addEventListener('click', function () {
    currentPage--;
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    feed.options.cachedPrevious();

    if (currentPage < 2) {
        previousButton.setAttribute('disabled', 'disabled');
    }
});

feed.run();

CSS:

.instagramImg{
    height:148px;
    width:148px;
    padding: 0 3px 3px 0;
}

.instagramFeed{
    margin-top:5px;
    min-height:440px;
}

.instaFeedButton{
    float:left;
}

.instaFeedDesc{
    float:left;
}

.btn-feed{
    padding:2px 25px;
}

Here I have used the instafeedjs JavaScript library that allows to get the feeds whenever you need (Lazy Load) and have more control that way you need to load the feeds.