javascriptjqueryfilterinstagraminstafeedjs

Instafeed filter data into different divs

I have 4 divs & I want to show 20 results as below:

Div 1 - first 5 feeds

Div 2 - next 5 feeds (exclude first 5)

Div 3 - next 5 feeds (exclude first 10)

Div 4 - next 5 feeds (exclude first 15)

HTML

<ul id="instafeed2" class="instafeed slides"></ul>
<ul id="instafeed3" class="instafeed slides"></ul>
<ul id="instafeed4" class="instafeed slides"></ul>
<ul id="instafeed5" class="instafeed slides"></ul>

JS

var feed = new Instafeed({
        get: 'user',
        userId: userId,
        accessToken: 'accessToken',
        limit:10,
        template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',
        resolution: 'standard_resolution',
        target: 'instafeed2',
    });

feed.run();

Plugin url : http://instafeedjs.com/ Instafeed

I am able to fetch result but unable to split them.

Please suggest.

Solution

  • Yes, you can split the feeds into different divs. In-order to achieve this;

    1. override the success call back implementation, it provides the feasibility to control the feed data as we want.
    2. create feed data with desired template(because this success function returns JSON)
    3. Slice the feed data and assign to Divs

    Find the demo code here

        var imgs = [];
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'srilanka',
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        limit: 20,
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',
        success: function (data) {
            // read the feed data and create owr own data struture.
            var images = data.data;
            var result;
            for (i = 0; i < images.length; i++) {
                var 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);
            }
            //split the feed into divs
            $("#instafeed2").html(imgs.slice(0, 5));
            $("#instafeed3").html(imgs.slice(5, 10));
            $("#instafeed4").html(imgs.slice(10, 15));
            $("#instafeed5").html(imgs.slice(15, 20));
        }
    });
    feed.run();
        <html>
    <head>
        <title>Example of Instafeed filter data into different divs - Ajith</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>
    </head>
    
    <body>
        <p>Div1</p>
        <ul id="instafeed2" class="instafeed slides"></ul>
        <p>Div2</p>
        <ul id="instafeed3" class="instafeed slides"></ul>
        <p>Div3</p>
        <ul id="instafeed4" class="instafeed slides"></ul>
        <p>Div4</p>
        <ul id="instafeed5" class="instafeed slides"></ul>
    </body>
    </html>