Показать изображения в встроенной карусели не работает

Question

Я пытаюсь создать галерею для своих personal website. Проблема в том, что галерея не появляется в карусели, но вместо этого выглядит как сетчатая галерея. Я следил за всем, начиная с официального руководства setup. Когда я осмотреть page, я получаю что-то подобное написано в консоли:

blueimp Gallery: No or empty list provided as first argument. HTMLCollection[18] 

галерея код:

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 
</div> 
<div id="instafeed"></div> 
<script type="text/javascript"> 
    var feed = new Instafeed({ 
     get: 'user', 
     userId: '', 
     accessToken: '', 
     clientId: '', 
     template: {% raw %}'<a href = {{image}} ><img src = "{{image}}"></a>'{% endraw %}, 
     sortBy: 'most-recent', 
     limit: 18, 
     links: false 
    }); 
    feed.run(); 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="js/jquery.blueimp-gallery.min.js"></script> 
<script> 
blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'), 
    { 
     container: '#blueimp-gallery-carousel', 
     carousel: true 
    } 
); 
</script> 

{% сырым%} используется, так как сайт был сделан в Джекил. Я читал об этом here. Галерея изображений находится в нижней части моего personal site.

Обновленный код:

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 
</div> 
<div id = "instafeed"> 
</div> 
<script type="text/javascript"> 
    var feed = new Instafeed({ 
     get: 'user', 
     userId: '270912755', 
     resolution: 'standard_resolution', 
     accessToken: '270912755.4e019ce.38f9a6730d14410b919b96cc3ee658dd', 
     clientId: '4e019ce8ec2744dca631db3ddf85607d', 
     template: {% raw %}'<a href = "{{image}}" ><img src = "{{image}}"></a>'{% endraw %}, 
     sortBy: 'most-recent', 
     limit: 18, 
     links: false, 
     mock: true, 
     success: function(response) { 
      blueimp.Gallery(
      document.getElementById('instafeed').getElementsByTagName('a'), 
      {  container: '#blueimp-gallery-carousel', 
        carousel: true 
      } 
      ); 
     } 
    }); 
    feed.run(); 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="js/jquery.blueimp-gallery.min.js"></script> 

Answer 1

ниже код должен решить проблему синхронизации:

var feed = new Instafeed({ 
    get: 'user', 
    userId: '', 
    accessToken: '', 
    clientId: '', 
    template: '{% raw %}<a href = {{image}} ><img src = "{{image}}"></a>{% endraw %}', 
    sortBy: 'most-recent', 
    limit: 18, 
    links: false, 
    after: startCarousel 
}); 
feed.run(); 

function startCarousel() 
{ 
    blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'), 
    { 
     container: '#blueimp-gallery-carousel', 
     carousel: true 
    } 
); 
} 

Я обернутый код Carousel в функцию, которая вызывается обратно в код Instafeed с опцией after. Это должно запустить Карусель после того, как изображения с загружены Instagram.

Дополнительные параметры (от Instafeed Github)

• до (функция) - функция обратного вызова вызывается до извлечения изображений из Instagram.
  • after (function) - функция обратного вызова, вызываемая при добавлении изображений на страницу.
  • success (function) - функция обратного вызова, вызываемая, когда Instagram возвращает действительные данные. (аргумент -> объект json)
  • ошибка (функция) - функция обратного вызова, вызванная при получении ошибок. (аргумент -> строковое сообщение)
  • mock (bool) - установить для истинных данных выборки без вставки изображений в DOM. Использовать с успешным обратным вызовом.
  • filter (function) - функция, используемая для исключения изображений из ваших результатов. Функция будет давать данные изображения в качестве аргумента и ожидает, что функция вернет логическое значение. См. Пример ниже для получения дополнительной информации.

Answer 2

Попробуйте это:

$(document).ready(function(){ 
blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'), 
    { 
     container: '#blueimp-gallery-carousel', 
     carousel: true 
    } 
); 
}); 

Answer 3

Вызвать blueimp.Gallery после вызова функции из инст корма.

<script type="text/javascript"> 
    var feed = new Instafeed({ 
     get: 'user', 
     userId: '', 
     accessToken: '', 
     clientId: '', 
     template: {% raw %}'<a href = {{image}} ><img src = "{{image}}"></a>'{% endraw %}, 
     sortBy: 'most-recent', 
     limit: 18, 
     links: false, 
after: function() {  
       blueimp.Gallery(
    document.getElementById('instafeed').getElementsByTagName('a'), 
    { 
     container: '#blueimp-gallery-carousel', 
     carousel: true 
    } 
); 
      }, 
    }); 
    feed.run(); 
</script>