Colorbox links not working on Ajax loaded content

Question

I am using latest stable version of the Colorbox module

I have an image gallery with small thumbnails and a big one.

When I click on a small thumbnail it loads via Ajax a big image:

$commands[] = ajax_command_html(
    '.big-image', l(theme('image_style', array('style_name' => 'node-image', 'path' => 'public://' . $get_src)), file_create_url('public://' . $get_src), array('attributes' => array('class' => 'colorbox'), 'html' => TRUE))
  );

As you see i have added class .colorbox to a link, but it works only on the images that were loaded during the page load and it's not working on AJAX loaded images.

How can I re-initialize colorbox on Ajax images?

Answer 1

You need to attach your js using Drupal behaviors.

Drupal.behaviors.yourmodulename = {
  attach: function (context, settings) {
    // This code is run on page load and after every ajax request
    // attach colorbox functionality here... 
    // the following line should do the job but I've not tested it
    // we are using context so it only applies to the newly added objects
    $('.colorbox', context).colorbox();
  }
};

I found this blog post on the subject really useful.