jquery - 谷歌地图与灯箱图像效果

Question

所以我有一个自定义的谷歌地图，我在上面放置了点，当您单击该图像时，会显示一个 HTML 弹出窗口。

我遇到的问题是我想对弹出 HTML 框中的图像使用 lightbox/fancybox 效果。看起来由于这些是动态生成的，jquery 在页面加载时无法识别它们或无法找到它们。

   <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.image = "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>

我已经确认 Fancybox 实际上可以在包含 Google map 中没有的静态图像的页面上运行。

我之前已经通过使用jquery查找东西来解决过这种情况

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

但是我需要一个 jquery 事件来关闭，并且由于图像是在页面加载后动态创建的，所以我无法在弹出窗口的 HTML 部分中分配任何内容 .click 事件(或者至少我不知道如何)。

所以回顾一下，我只是希望能够在点击 GLatLng 点的谷歌地图弹出 HTML 内的图像上放置一个灯箱/花式盒子。

任何想法或帮助将不胜感激。

Answer 1

可能不完全理解您的代码的行为方式，但在 createMarker() 末尾返回标记之前，您是否尝试添加以下内容:

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

    });

编辑:使用 .livequery() plugin 怎么样？为此？

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