Quantcast
Channel: Adding Pagination or Lazy Load to Instagram feed - Stack Overflow
Viewing all articles
Browse latest Browse all 2

Adding Pagination or Lazy Load to Instagram feed

$
0
0

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>

Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles



Latest Images