colorbox callback functions are not being triggered here - anyone know why?

i am extending tidypics here to improve the UI and decided to look at creating an AJAX lightbox popup using the colorbox system that comes with elgg. in my own case, on my site, i am probably going to need to run the 'onOpen' callback in colorbox to move the location of the colorbox elements in the rendered HTML file (using Jquery) due to specific issues with my theme. i found though, that i am unable to trigger the events in colorbox that are listed on the colorbox website, here:

the code i am using to call the colorbox popup is here:

$img = elgg_view_entity_icon($image, 'large', array(
    'link_class' => 'elgg-lightbox',
    'href' => 'ajax/view/ureka/image_popup?guid=' . $image->guid,
    'data-colorbox-opts' => json_encode([
        'height' => '96%',
        'width' => '96%',
        'fixed' => true,
        'className' => 'imagebox' . $image->guid,
      'onOpen' => "function() {alert('test'); console.log('open'); }",

has anyone ever used this approach with colorbox in elgg and succeeded in getting the callbacks to be triggered? the other parameters i am assigning do appear to be applied when the page is rendered. thanks