Google Maps with Lightbox on Image effect

So I have a custom google map that I put points on and an HTML popup window shows when you click on that image.

The problem I'm having is that I want to use a lightbox/fancybox effect on images inside the popup HTML box. It seems like since these are dynamically generated that jquery is not recognizing them on page load or can't find them.

   <script type="text/javascript">
     function initialize() {

        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(39.470125,83.605957 ), 4); // Taklamakan desert
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            var blueIcon = new GIcon(G_DEFAULT_ICON);

            blueIcon.imag开发者_如何学Pythone = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

            // Set up our GMarkerOptions object

            markerOptions = { icon:blueIcon };


            // Creates a marker at the given point
            // Clicking the marker will hide it
            function createMarker(latlng, number, myHtml)
            {
                var marker = new GMarker(latlng, markerOptions);
                marker.value = number;
                GEvent.addListener(marker,"click", function() {
                    map.openInfoWindowHtml(latlng, myHtml);
                });
                return marker;
            }



            var latlng = new GLatLng(40.641468, 87.756958 );
            var myHtml = 'Yingpan Man was excavated here near the Könchi River. Yingpan was active from 300 BCE–500 CE. <img src="http://www.penn.museum/silkroad/images/objects/thumbs/yingpan_man_web_thumb.jpg" alt="Yingpan Man" /> <br /><br /><br />';
            map.addOverlay(createMarker(latlng, 0, myHtml));

            var latlng1 = new GLatLng(39.548953, 88.899536 );
            var myHtml1 = 'The Beauty of Xiahoe<br /> <a class="fancier_image" href="images/objects/beauty_xiaohe.jpg"> <img src="images/objects/thumbs/beauty_xiaohe_thumb.jpg" alt="The Beauty of Xiahoe" /> </a> <br /><br /><br />';
            map.addOverlay(createMarker(latlng1, 1, myHtml1));


}
 }


$(document).ready(function() {


    $(".fancier_image").fancybox({
    'overlayShow'   : false,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'easingIn'      : 'easeOutBack',
    'easingOut'     : 'easeInBack'

    });

});

</script>

I have confirmed that the Fancybox actually works on the page with a static image that is not in the Google map.

I have remedied this type of situation before by finding the thing with jquery

$(document).find('a.fancier_image')

but I need a jquery event to go off of and since the image was dynamically created after page load I can't assign anything in the HTML portion of the popup a .click event (or at least I don't know how).

So to recap I just want to be able to put a lightbox/fancybox on an image inside a google maps popup HTML off of a clicked GLatLng point.

Any ideas or help would be greatly appreciated.

Might not fully understand how your code is behaving, but before returning marker at the end of createMarker(), have you tried adding this:

$(document).find('a.fancier_image').fancybox({
    'overlayShow'   : false,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic',
    'easingIn'      : 'easeOutBack',
    'easingOut'     : 'easeInBack'

    });

Edit: How about using the .livequery() plugin for this?

$("a.fancier_image").livequery(addFancyBox);