谷歌地圖與燈箱上的圖像效果

因此，我有一個自定義的谷歌地圖，我把點和一個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

谷歌地圖與燈箱上的圖像效果

回答

相關問題