Создание карусели с совами из фотографий, взятых с Instafeed.js

В настоящее время я пытаюсь создать карусель изображений (используя Owl Carousel), которая динамически извлекает фотографии из Instagram (используя Instafeed.js). Я использую Owl Carousel v2 в сочетании с некоторыми пользовательскими сценариями, чтобы мои изображения были разделены на две горизонтальные строки, как сетка. У меня также правильно настроен Instafeed.js для загрузки изображений на основе имени тега.

У меня возникли проблемы с синхронизацией этих двух плагинов, чтобы моя Owl Carousel извлекала изображения из фида Instafeed.js.

В целях отображения я разделил разделы карусели и ленты Instagram, чтобы вы могли видеть, что они оба работают как отдельные плагины (обратите внимание, что для отображения изображений Instagram вы должны ввести свой собственный идентификатор клиента).

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/


javascript html jquery owl-carousel instafeedjs
person Nick    schedule 28.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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();

    });
person elazafran    schedule 21.07.2015

arrow_upward
0
arrow_downward

Вызовите карусель совы после загрузки изображения Instafeed.

    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();
person Richie    schedule 17.03.2015