Javascript OpenLayers弹出窗口中的Lightbox图库

我目前正在设计一个广泛使用openlayers的网站。地图上有各种矢量标记，当用户单击一个标记时，会出现一个弹出窗口。在此弹出窗口中，有一些已为lightbox设置的图像。唯一的问题是，当单击缩略图时，图像将在新窗口中打开（即Lightbox没有对链接进行事件识别）。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);
}

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

---

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

尽管我从未用Lightbox解决过这个问题，但我还是转而为自己解决了这个问题

对我来说，切换到Lightbox2不起作用，因为我的项目中目前没有jquery。。。下面是使用Openlayers 2.13.1实现它的步骤

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

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

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

<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>

希望它能帮助别人

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

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