1

我目前正在尝试构建一个动态拉入 Instagram 照片（使用 Instafeed.js）的图像轮播（使用 Owl Carousel）。我将 Owl Carousel v2 与一些自定义脚本结合使用，将我的图像分成两个水平行，就像一个网格。我还正确设置了 Instafeed.js，以根据标签名称提取图像。

我在同步这两个插件时遇到了一些麻烦，因此我的 Owl Carousel 会从我的 Instafeed.js 提要中提取图像。

出于显示目的，我将轮播和 Instagram 提要 div 分开，以便您可以看到它们都作为单独的插件工作（请注意，要显示 Instagram 图片，您必须输入自己的客户端 ID）。

HTML：

<section id="demos">
    <div class="row">
        <div id="owl2row-plugin" class="owl-carousel"></div>
    </div>
</section>

<div id="instafeed"></div>

JS：

$(function () {
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR CLIENT ID',
        limit: 25,
        template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>',
        before: function () {
            for (var i = 0; i < 24; i++) {
                $newdiv = $('<div class="item"></div>').html('<img src="http://placehold.it/200x200">');
                $('#owl2row-plugin').append($newdiv);
            }
            var owl = $('#owl2row-plugin');
            owl.owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                dots: false,
                owl2row: 'true',
                owl2rowTarget: 'item',
                owl2rowContainer: 'owl2row-item',
                owl2rowDirection: 'utd',
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 5
                    }
                }
            });
        }
    });
    feed.run();
});

对于那些熟悉 Instafeed.js 的人来说，添加以下内容是否有意义：

target: 'owl2row-plugin',

这样照片就会被注入到我的轮播中？我注意到这样做只会破坏轮播：/

什么都有帮助！

小提琴：http : //jsfiddle.net/njacoy/zcrwvsuu/embedded/result/

4

2 回答 2

1

HTML 代码

<section class="instagram container-fluid mt-md ">
    <div class="row">
            <div id="owl2row-plugin" class="owl-carousels">
                 <div id="instafeed" class="owl2row-plugin">
                 </div>
            </div>
    </div>
</section>

jQuery 代码

    $(document).ready(function(){

        var feed = new Instafeed({

            //get: 'user',
            userId: 5411567,
            accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716',
            get: 'user',
            //tagName: 'awesome',
            clientId: 'fdf210ab13ce47e48ac861bac822d1a3',
            limit: 25,


            after: function () {

                var owl = $('.owl2row-plugin');
                owl.owlCarousel({
                    loop: true,
                    margin: 0,
                    navText:['',''],
                    nav: true,
                    dots: false,
                    owl2row: 'true',
                    owl2rowTarget: 'item',
                    owl2rowContainer: 'owl2row-item',
                    owl2rowDirection: 'utd',
                    responsive: {
                        0: {
                            items: 3
                        },
                        600: {
                            items: 5
                        },
                        1000: {
                            items: 10
                        }
                    }
                });
            },
            template: '<div class="item"><a href="{{link}}" target="_blank"><span><img src="{{image}}" alt="{{caption}}"/></span></a></div>',

        });

        feed.run();

    });
于 2015-07-21T18:44:05.237 回答
0

在Instafeed 加载图像后调用 owl carousel 。

    var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'YOUR CLIENT ID',
    limit: 25,
    template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>',
    after: function () {
        for (var i = 0; i < 24; i++) {
            $newdiv = $('<div class="item"></div>').html('<img src="http://placehold.it/200x200">');
            $('#owl2row-plugin').append($newdiv);
        }
        var owl = $('#owl2row-plugin');
        owl.owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            owl2row: 'true',
            owl2rowTarget: 'item',
            owl2rowContainer: 'owl2row-item',
            owl2rowDirection: 'utd',
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
    }
});
feed.run();
于 2015-03-17T02:51:59.760 回答