OpenLayers PopUp的Lightbox Gallery

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

我想有lightbox在弹出窗口工作，任何帮助将不胜感激。这里是我的代码：

弹出创建：从Lightbox.js关于点击收听

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

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

来源

2013-01-15 gimg1

虽然我从来没有解决灯箱的问题，但切换到Lightbox2.js解决了我的问题。

来源

2013-03-07 17:32:34 gimg1

对我来说，切换到Lightbox2不起作用，因为我已经在我的项目目前没有jQuery的...所以这里的步骤与2.13.1的OpenLayers

把它起初手动初始化灯箱。在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>

之后改变图像加载应该工作。不幸的是，图片显示在地图背后。一个简单的CSS改变解决了这个问题。

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

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

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

来源

2014-07-08 08:54:13 OkieOth

OpenLayers PopUp的Lightbox Gallery

回答

相关问题