Trying to display Instagram images in carousel - how do I load the carousel only when the images are done loading?

Question

I feel like this should be incredibly simple but am having unbelievable amounts of trouble implementing it.

I am using a Javascript plugin, Instafeed, to pull Instagram images into a page - this is working fine.

After the images have loaded, I want to take them and put them into a carousel.

I have a JSFiddle showing what is happening here.

What should be happening in the generated document is this:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
  <div class="slick-list draggable" tabindex="0">
   <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
      <div class="slick-slide">IMAGE IN HERE</div>
   </div>
  </div>
</div>

Instead, this is happening:

<div id="instafeed" class="instafeed slick-initialized slick-slider">
   <div class="slick-list draggable" tabindex="0">
      <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
   </div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
   <div>IMAGE IN HERE</div>
</div>

Essentially, the carousel seems to be loading before or at the same time as Instafeed and so it never 'sees' the images inside the container and they end up not nested properly and not having classes applied. So it appends its classes (slick-initialized and slick-slider) to the parent container and doesn't format any of the children correctly.

I have tried placing the Instafeed script in the head and starting it on window load. This makes no difference.

Is there a way I can make the carousel only load when the Instagram photos have loaded? Or is this not possible without building callbacks etcetera into the plugins themselves? Is there a simple way to do this? Any help would be appreciated!

Answer 1

Use after (called when images have been added to the page) callback

var feed = new Instafeed({
    get: 'user',
    userId: 3722752,
    accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716',
    template: '<div><a href="{{link}}"><img src="{{image}}" /></a></div>',
    after: function () {
        $('.instafeed').slick({slidesToShow: 3});
    }
});

Example

Answer 2

There are a couple of things that you need to do. First, you need to use the "after" callback function when setting up your Instafeed. This ensures that the slick carousel is initiated only after your Instafeed images have loaded.

Second, you need to use the "target" option so that the images are loaded into the container that will be used to create the carousel.

var feed = new Instafeed({
    target: 'instafeed'
    after: function() {
        $('#instafeed').slick({
            slidesToShow: 3
        });
    }
});

Additionally, you need to include the slick CSS file, which wasn't present in your jsfiddle. Working example in jsfiddle: http://jsfiddle.net/L0zpwebz/3/