ライトボックス付き画像付きGoogleマップ

Question

私はポイントを置くカスタムのGoogleマップを持っており、その画像をクリックするとHTMLポップアップウィンドウが表示されます。

私が抱えている問題は、ポップアップHTMLボックス内の画像にライトボックス/ファンシーボックスエフェクトを使用したいということです。 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ポイントのGoogleマップポップアップ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);