jquery - 使用 fancybox 时谷歌地图在新窗口中显示图像的问题

Question

在显示 KML 文件的内容时，我在使用 fancybox 和 google map (v3)时遇到一些问题。

显示包含描述的气球时，我有一个图像的缩略图，我想在使用 fancybox 单击时显示该图像的缩略图。我遇到的问题是，当单击缩略图时，会显示 fancybox，但浏览器还会生成一个显示全尺寸图像的新窗口。

我知道在解析 KML 文件时，任何 href 标签都会添加目标属性，因此我尝试在 map 加载后将其删除，同时将 fancybox 附加到链接。

我在尝试之前确保 map 已加载:即

function updatemap(surveyid){

    var map;

    var myOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var url = "https://myurl/feed/kml.php?action=survey&id=" + surveyid;

    map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

    var kmlLayer = new google.maps.KmlLayer(url);

    kmlLayer.setMap(map);

    google.maps.event.addListener(map, "tilesloaded", function(){
        attachFancyBox();
    });


}

attachFancyBox() 函数如下所示。

function attachFancyBox(){

    $("a:has(img)").fancybox({
        "hideOnContentClick":true
    }).removeAttr("target");

}

现在这将适用于 Firefox，但其他浏览器(IE7+、safari、chrome)的行为如上所述。那么有没有一种方法可以实现在 fancybox 中显示图像而不生成新窗口/选项卡？

非常感谢...

Answer 1

对不起，我没有时间完全重建您的情况，但可能是因为不是目标，可能是因为Google map 脚本将click事件绑定(bind)到一个标签？尝试在附加花式框之前取消绑定(bind)所有事件:

function attachFancyBox(){
  $("a:has(img)").unbind()
    .fancybox({
      "hideOnContentClick":true
    })
    .removeAttr("target");
}