Display images in inline carousel not working

Question

I am trying to make a gallery for my personal website. The problem is that the the gallery doesn't show up in a carousel but instead shows like a grid gallery. I have followed everything from the official setup guide. When I inspect the page, I get something like this written in console:

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

gallery code:

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

{% raw %} is used since the site is being made in jekyll. I read about it here. The image gallery can be found on the bottom of my personal site.

Updated code:

<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

The code below should solve your timing problem:

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

I've wrapped the Carousel code into a function that gets called back by the Instafeed code with the option after. That should start the Carousel after the images from Instagram are loaded.

Advanced Options (from the Instafeed Github)

• before (function) - A callback function called before fetching images from Instagram.
  • after (function) - A callback function called when images have been added to the page.
  • success (function) - A callback function called when Instagram returns valid data. (argument -> json object)
  • error (function) - A callback function called when there is an error fetching images. (argument -> string message)
  • mock (bool) - Set to true fetch data without inserting images into DOM. Use with success callback.
  • filter (function) - A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.