Карты Google с лайтбоксом на изображении - PullRequest
Новая
       21

Карты Google с лайтбоксом на изображении

2 голосов
/ 20 января 2011

Таким образом, у меня есть пользовательская карта Google, на которую я ставлю точки, и при нажатии на это изображение появляется всплывающее окно HTML.

Проблема в том, что я хочу использовать эффект лайтбокса / fancybox для изображений внутри всплывающего окна 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 (или, по крайней мере, я не знаю, как ).

Итак, напомню, я просто хочу иметь возможность поместить лайтбокс / необычную коробку на изображение внутри всплывающего HTML-кода Google Maps вне точки GLatLng, по которой щелкнули.

Любые идеи или помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 20 января 2011

Может не совсем понять, как ведет себя ваш код, но перед возвратом маркера в конце createMarker () вы пытались добавить это: 

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

    });

Edit: Как насчет использования плагина .livequery () для этого?

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

...