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地图中的静态图像。

我之前通过使用jquery

找到了这个问题来解决这种情况

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

但是我需要一个jquery事件，因为图像是在页面加载后动态创建的，所以我不能在弹出窗口的HTML部分中指定任何东西.click事件（或者至少我不知道如何）。

所以回顾一下，我只是希望能够在点击的GLatLng点的谷歌地图弹出HTML中的图像上放置一个lightbox / fancybox。

非常感谢任何想法或帮助。

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);

谷歌地图与灯箱图像效果

1 个答案: