Dynamic Colorbox galleries using Ajax

Question

Hi,

I am new to jQuery / AJAX. I have a page that uses colorbox to display photo galleries. The page displays only one image from each gallery. When clicked, a colorbox opens up with all of the photos from that gallery. These inner photo references (for all photos from all galleries) are hidden on the page in an invisible div. The page is a PHP generated page. The galleries/photos are being populated via Picasa.

All of the above works fine, but instead of loading all of the images from all galleries on page load (via PHP), I'd like to load only the requested gallery into the colorbox via AJAX.

So far, I have a test page which can insert the proper links into a div on the page, but the Colorbox won't pick up on these links. This is where I need help. How can I get Colorbox to recognize the links generated by my AJAX call?

The colorbox scripts sit in the header:

 <script type="text/javascript" src="libs/js/jquery.colorbox.js"></script>
 <script type="text/javascript">
  //Writing out the ColorBox command for each album
  $(document).ready(function(){
   <?php 
   $setnum = 0;
   foreach ($albumIds as $albumId){
       echo "\t\t\t$(\"a[rel='set" . $setnum . "']\").colorbox({maxWidth:\"640px\",     maxHeight:\"480px\"});\n";
       $setnum++;
   }
   ?>
  });
 </script>

Here is my get JSON code located in the body section of the page:

$.getJSON("myserv.php",formContent, function(json){
  var photos = json.data.items;
  var numpics = json.data.items.length;
  var pointer = 1;

  while (pointer < numpics){
   var stuffineed = photos[pointer].media.image.url;
   $("#ajaxBox").append("<a href='" + stuffineed + "' rel='set" + pointer +"'>" + photos[pointer].media.image.url + "</a><br />");
   pointer++; 
  }

 }); //End json 

Again, I can get the AJAX to populate the div correctly, but the colorbox script isn't picking up these images.

Any help would be greatly appreciated.

Answer 1

I see what you are trying to do, but the data you are trying to do it to doesn't exist until after the ajax callback. So, easy solution:

wrap the colorbox function in a named function, and call it on callback:

 <script type="text/javascript">
  //Writing out the ColorBox command for each album
  function setcb(){
   $(document).ready(function(){
   <?php 
   $setnum = 0;
   foreach ($albumIds as $albumId){
       echo "\t\t\t$(\"a[rel='set" . $setnum . "']\").colorbox({maxWidth:\"640px\",     maxHeight:\"480px\"});\n";
       $setnum++;
   }
   ?>
   });
  });
 </script>

then call the function when your json returns:

$.getJSON("myserv.php",formContent, function(json){
  var photos = json.data.items;
  var numpics = json.data.items.length;
  var pointer = 1;

  while (pointer < numpics){
   var stuffineed = photos[pointer].media.image.url;
   $("#ajaxBox").append("<a href='" + stuffineed + "' rel='set" + pointer +"'>" + photos[pointer].media.image.url + "</a><br />");
   pointer++; 
  }
  setcb();
 }); //End json 

It will use some extraneous selectors in this way of doing it because you are building the method call for all galleries each time the ajax gets called. Probably an easier way of doing this is to have the json contain reply with the $setnum value you are using and pass that in to setcb as a value to call colorbox on just the current result set.