ajax and lightbox

[pagerussell]

hello,

A site I am developing uses innerhtml to load all content into a
content box. I have the jquery script links and function on the main
part of the page that does not refresh. The image gallery is printed
into the content box when the innerhtml function is called but
fancybox does not function then.

I have tested my code by building a static site with no ajax call,
and then the fancybox functions exactly as desired. but when i use php
and innerhtml to write the image gallery links onto the page it will
not function. What is going on?

here is the code:

in the header of the static part of the page, which does not reload on
the ajax call:

<!--FancyBox Code--> 
        <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> 

The innerhtml function spits out this into the content area (note that
all quotes are escaped due to php - that explains all the extra slashes):

                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> 

I cant get it right. I am thinking that maybe the function needs to be
refreshed too, but I am not certain exactly how to make that happen.

Thanks in advance for your help!