谷歌地图与灯箱上的图像效果

因此，我有一个自定义的谷歌地图，我把点和一个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事件熄灭，并因为图像页面加载我不能分配后，动态创建弹出式窗口的.click事件的HTML部分中的任何内容（或者至少我不知道如何）。

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

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

来源

2011-01-20 mmundiff

可能没有充分理解你的代码是如何表现，但在createMarker（）结束返回标志之前，你有没有尝试添加此：

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

    });

编辑：如何使用.livequery() plugin这个？

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

来源

2011-01-20 19:06:17

我试过了。基本上，因为图像是由Google Maps动态制作的，所以我没有要使用$（document）.find（'a.fancier_image'）的事件。 – mmundiff 2011-01-20 19:25:52

谷歌地图与灯箱上的图像效果

回答

相关问题