Calling a colorbox from a bxslider slide

Calling a colorbox from a bxslider slide

I have bxSlider set up with one of the slides being a colorbox ligtbox, but I can't get the bxslider image or a link to open the colorbox. Here is my code:

  2.  $(document).ready(function() {
  3.         var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });

  5.         $("a#openGallery").click(function(e){
  6.             e.preventDefault();
  7.             $gallery.eq(0).click();
  8.         });
  9.  
  10. $('a.slideGroup').colorbox({onComplete:function(){
  11.   $('#cboxTitle').css('color', '#800000 !important');
  12.   }});
  14. $('a.slideGroup').colorbox({onComplete:function(){
  15.     var cboxTitleHeight = $('#cboxTitle').height();
  16.     var cboxContentHeight = $('#cboxContent').height();
  17.     var cboxWrapperHeight = $('#cboxWrapper').height();
  18.     var colorboxHeight = $('#colorbox').height();
  19. var cboxPhotoHeight = $('.cboxPhoto').height();

  21.     $('#cboxMiddleLeft, #cboxMiddleRight, #cboxContent').css('height', (cboxContentHeight + cboxTitleHeight) + 'px');
  22.     $('#cboxWrapper').css('height', (cboxWrapperHeight + cboxTitleHeight) + 'px');
  23.     $('#colorbox').css('height', (colorboxHeight + cboxTitleHeight) + 'px' );
  24. $('#cboxLoadedContent').css('height', (cboxTitleHeight + cboxPhotoHeight) + 'px'
  25. }});
  26.     });
Here is the page I am using it on: