4

我目前正在设计一个广泛使用 openlayers 的网站。地图上放置了各种矢量标记，当用户单击标记时，会出现一个弹出窗口。在此弹出窗口中，有一些已为灯箱设置的图像。唯一的问题是，当单击缩略图时，图像会在新窗口中打开（即 Lightbox 没有对链接进行事件识别）。灯箱的 html 非常好，因为我已经在弹出窗口之外对其进行了测试。

我想让灯箱在弹出窗口中工作，任何帮助将不胜感激。这是我的代码：

弹出窗口创建：

function onFeatureSelect(feature) {
    selectedFeature = feature;
    popup = new OpenLayers.Popup.AnchoredBubble("PopUp", 
                    feature.geometry.getBounds().getCenterLonLat(),
                    null,
                    null,
                    null, true, onPopupClose);
    popup.setContentHTML('<div><a  href="large_image.png" rel="lightbox"><img src="thumb_image.png" /></a></div>');
    feature.popup = popup;

    map.addPopup(popup);
}

Lightbox.js关于点击收听的摘录：

updateImageList: function() {   
    this.updateImageList = Prototype.emptyFunction;
    document.observe('click', (function(event){
        var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
        if (target) {
            event.stop();
            this.start(target);
        }
    }).bind(this));
},

谢谢阅读。任何帮助将不胜感激。

4

2 回答 2

0

虽然我从未解决过 Lightbox 的问题，但切换到Lightbox2.js为我解决了这个问题。

于 2013-03-07T17:32:34.443 回答
0

对我来说，切换到 Lightbox2 不起作用，因为我的项目中目前没有 jquery ......所以这里是使用 Openlayers 2.13.1 启用它的步骤

首先手动初始化灯箱。body 标记中的给定 onload 函数似乎覆盖了 lightbox.js 中的标准初始化

function initMap() {
    // manually call the init function from lightbox.js
    if (initLightbox)
        initLightbox();
...

下一步是手动将 onclick 功能添加到您的图像缩略图中。通常灯箱会为您执行此操作，但在单击功能符号后会动态加载弹出内容。图片链接应该是这样的

<a class="doc" href="/path_to_pic/util/docklein/sample.jpg" rel="lightbox"
            onclick="showLightbox(this); return false;">
    <img src="/path_to_pic/util/docpreview/sample.jpg"/>
</a>

在此更改后，图像加载应该可以工作。不幸的是，图片显示在地图后面。一个简单的css改变解决了这个问题。

#overlay {
    z-index: 1100 ! important;
}

#lightbox {
    z-index: 1101 ! important;
}

希望它可以帮助某人:-D

于 2014-07-08T08:54:13.447 回答