Dynamic Colorbox galleries using Ajax
- by Gobitron
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.
