Question

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

我想让灯箱在弹出窗口中工作，我们将非常感谢任何帮助。这是我的代码：

Popup Created：

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));
},

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

Answer 1

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

Answer 2

对我来说，切换到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

OpenLayers PopUp中的Lightbox图库

2 个答案: