Instafeed.js and jQuery colorbox

Question

I'm trying to set the jQuery Colorbox on the Instafeed.js images. Both of the scripts work fine separately, but whenever I try to set the colorbox class to an element inside the Instafeed.js template part, Colorbox doesn't work anymore.

However, Colorbox is working correctly outside the Instafeed script, either with the Colorbox class set to an <a> or <img>.

Instafeed

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
    });
    userFeed.run();

Colorbox

$(document).ready(function(){
            $(".box").colorbox({transition:"fade"});
        });

There was the same issue here : https://github.com/stevenschobert/instafeed.js/issues/198 but the solution given didn't work for some reasons. With this solution, nothing happens when I click on an image. With my previous code, shown on the post, it opened the image in a different window.

Is there a specific thing to do to set Colorbox into Instafeed ? I've tried everything I could, and there's not much about it online.

Answer 1

I'm assuming that your problem is that you are querying for $(".box") before those elements have actually been added to the DOM. You'll want to assign Colorbox after Instafeed has added the markup for the anchor elements to the DOM.

Looking at Instafeed's API, they provide an after callback for just this sort of thing. This should work:

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
      after: function(){
          $(".box").colorbox({transition:"fade"});
      },
    });
    userFeed.run();