1

私は現在、Instagram の写真 (Instafeed.js を使用) を動的に取り込む画像カルーセル (Owl Carousel を使用) を構築しようとしています。Owl Carousel v2 をいくつかのカスタム スクリプトと組み合わせて使用​​して、画像をグリッドのように 2 つの水平行に分割しています。また、タグ名に基づいて画像を取り込むように Instafeed.js を適切にセットアップしました。

Owl Carousel が Instafeed.js フィードから画像を取り込むように、これら 2 つのプラグインを同期するのに問題があります。

表示の目的で、カルーセルと 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 に答える