Позвоните в Fancybox из POI Google Maps - PullRequest
Новая
       1

Позвоните в Fancybox из POI Google Maps

2 голосов
/ 21 ноября 2011

Я создаю страницу, которая загружает точки трека gpx из текстового файла в виде POI в слой Google Maps. Когда пользователь нажимает на POI, он видит эскиз фотографии, снятой с этого места. Я хочу, чтобы Fancybox открывал увеличенную версию фотографии, когда пользователь нажимает на миниатюру. Это не работает, по-видимому, потому что всплывающее окно не было создано при загрузке страницы. Может показаться, что мне нужно добавить свой код jQuery в прослушиватель событий, но я не могу понять, как это сделать. Мой нерабочий код: 

<script type="text/javascript">
    var map;

    function init() {
        map = new OpenLayers.Map('map');
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var gphy = new OpenLayers.Layer.Google(
            "Google Physical",
            {type: G_PHYSICAL_MAP}
        );
        var gmap = new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 20}
        );
        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrid",
            {type: G_HYBRID_MAP, numZoomLevels: 20}
        );
        var gsat = new OpenLayers.Layer.Google(
            "Google Satellite",
            {type: G_SATELLITE_MAP, numZoomLevels: 22}
        );

        var pois = new OpenLayers.Layer.Text( "My Points",
                { location:"ella_trip_waypoints.txt",
                  projection: map.displayProjection
                });
        map.addLayer(pois);



        map.addLayers([gphy, gmap, ghyb, gsat, pois]);

        map.setCenter(new OpenLayers.LonLat(-3.98600, 53.12540), 13);

google.maps.event.addListener(marker, 'click', function(){
// Call Fancybox, but how?
});

    }


</script>

Вы можете просмотреть страницу по адресу: http://ian -barton.com / fancybox / google.html

1 Ответ

0 голосов
/ 23 ноября 2011

, поскольку вы используете несколько экземпляров в одном и том же документе, вы не можете использовать один и тот же идентификатор (идентификаторы должны быть уникальными в документе) ... вместо этого используйте классы см http://fancybox.net/faq № 7

так у вас будет на каждом маркере 

<a class="simpletitle" href="path/image.jpg"><img alt="whatever" src="path/thumb.jpg" /></a>

тогда скрипт: 

$("#map").delegate("a.simpletitle", "click", function(event){
event.preventDefault();
$.fancybox(this);
});

, который связывает fancybox с существующими или будущими элементами в этом контейнере с id = "map"

ПРИМЕЧАНИЯ: Если вы хотите добавить опции fancybox API, используйте этот формат 

$("#map").delegate("a.simpletitle", "click", function(event){
 event.preventDefault();
 $.fancybox(this,{
  'titlePosition': 'inside'
 });
});

приведенный выше скрипт работает, когда содержимое является изображением

для другого типа контента (например, для внешней html-страницы) вы можете использовать следующий скрипт: 

$("#map").delegate( "a.simpletitle", "click",function(event){
 event.preventDefault();
 $.fancybox({
  'href': this.href,
  'titlePosition': 'inside',
  'width': 640,
  'height': 360,
  'type':'iframe'
 });
});
...