fancybox and innerhtml issue

[pagerussell]

hello,

I am using onclick ajax requests and innerhtml to give a site only partial page reloads. One of the page reloads links to an image gallery, where I am attempting to use fancybox. I have all the scripts properly linked and there are no syntax errors, but it (the fancybox effect) will not display. I know it is all properly coded, because when I create a simple test page (read: no innerhtml function) the fancybox effect works perfectly. Also, the innerhtml function works flawlessly on all other areas of the site, and i did not modify it for this particular instance. The code snippets:

in the header:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {



$("a[rel=example_group]").fancybox({
'transitionIn'      : 'none',
'transitionOut'     : 'none',
'titlePosition'     : 'over',
'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});



});
</script>


Then, the php that echoes the inner html:


<?php



echo"
Image gallery (ps, try using mouse scroll wheel)<br />


<a rel=\"example_group\" href=\"./images/_gallery/year_1/amil_year_1_001.jpg\" title=\"\"><img alt=\"\"


src=\"./images/_gallery/year_1/amil_year_1_001.jpg\" width=\"75\" height=\"75\" /></a>


<a rel=\"example_group\" href=\"./images/_gallery/year_1/amil_year_1_002.jpg\" title=\"\"><img alt=\"\" src=


\"./images/_gallery/year_1/amil_year_1_002.jpg\" width=\"75\" height=\"75\" /></a>


<a rel=\"example_group\" href=\"./images/_gallery/year_1/amil_year_1_003.jpg\" title=\"\"><img alt=\"\" src=


\"./images/_gallery/year_1/amil_year_1_003.jpg\" width=\"75\" height=\"75\" /></a>


<a rel=\"example_group\" href=\"./images/_gallery/year_1/amil_year_1_004.jpg\" title=\"\"><img class=\"last\"


alt=\"\" src=\"./images/_gallery/year_1/amil_year_1_004.jpg\" width=\"75\" height=\"75\"


/></a>


";
?>

If you want to look at what is going on, this code can be found at andymacislove.org/new.html

There, the first page load has the images, with fancybox functioning perfectly. click the image tab to the right however, and the innerhtml function reloads the content area with the exact same code, but this time it doesnt function.

Any ideas?