Colorbox: simple a link href image not appearing [closed]

Question

I have a function that lists the images linked to a post:

function bdw_get_images($gal) {             
   // Get the post ID   
   $galID = $gal;   
   // Get images for this post              
   $arrImages = get_children('post_type=attachment&post_mime_type=image&post_parent=' . $galID );
   if($arrImages) {         
       //Get array keys representing attached image numbers             
       $arrKeys = array_keys($arrImages);   
       foreach ($arrKeys as $key => $value) {                     
          $sThumbUrl = wp_get_attachment_thumb_url($value);   //Get the thumbnail url                                           
          $sImageUrl = wp_get_attachment_url($value); //Full-size url           
          echo "<a class=\"galleryImg\" href=\"" . $sImageUrl . "\"><img src=\"" . $sThumbUrl . "\" title=\"\" alt=\"image description\" /></a>";       
       }                            
   } 
};

When clicked, I want the full-size image to appear using the Colorbox plugin.

At the moment, when clicked, the background and borders of the Colorbox plugin appear (and seem to resize to the appropriate size of the linked image), but the image itself doesn't appear.

This is the javascript that I have in an external file (enqueued via the functions.php):

function handleOnChange() {
  var curr = $('select option:selected').text();
  $.ajax({
     url: my_ajax_script.ajaxurl,      
     type: 'POST',
     data: {
        'action' : 'find_gallery',
        'gallery_id' : curr 
     },
     dataType: 'html',
     beforeSend: function() {
         $('.scrollable .items').children().remove();
     },
     success: function(response) {
        $('.scrollable .items').append(response);
        $('.galleryImg').colorbox({rel: "gallery"});
     }
  });
  }

If you visit: http://www.monikaviktoria.com/artworks and select 'Ghosts' from the dropdown menu, then click an image - you'll see what is happening.

Does anyone know what I'm doing wrong?

Thanks.

Answer 1

WordPress loads jQuery in "No Conflict" mode. The "$" alias doesn't work. Use the full "jQuery"-- jQuery.$.ajax({... or wrap your script like...

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

That code comes from the jQuery site linked above.

I also do not see where you have hooked this into the AJAX API. I assume that you've done that properly somewhere.