Question

我有4个div和＆amp;我想显示20个结果如下：

Div 1 - 前5个Feed

Div 2 - 接下来的5个Feed（排除前5个）

Div 3 - 接下来的5个Feed（排除前10个）

Div 4 - 接下来的5个Feed（排除前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();

插件网址 http://instafeedjs.com/ Instafeed

我可以获取结果但无法拆分它们。

请建议。

Answer 1

是的，您可以将Feed拆分为不同的div。为了达到这个目的;

覆盖成功回调实施，它提供了控制饲料数据的可行性。
使用所需模板创建Feed数据（因为此成功函数返回JSON）
切片Feed数据并指定Divs

找到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>

Instafeed将数据过滤到不同的div中

1 个答案: