Lightbox Gallery in OpenLayers PopUp

Question

I am currently designing a website that uses openlayers extensively. There are various vector markers placed on the map and when the user clicks a marker a popup appears. Within this popup there is some images that have been set up for lightbox. The only problem is that when the thumbnail is clicked on the image opens in a new window (i.e. There was no event recognition by Lightbox for the link). The html for the lightbox is perfectly fine as I have tested it outside the popups.

I would like to have lightbox working in the popups and any help would be greatly appreciated. Here is my code:

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

Excerpt from Lightbox.js concerning the click listening:

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

Thanks for reading. Any help would be greatly appreciated.

score 0 · Accepted Answer · answered Mar 07 '13 at 17:32

0

Although I never solved the issue with Lightbox, switching to Lightbox2.js solved the problem for me.

answered Mar 07 '13 at 17:32

gimg1

1,121
10
24

score 0 · Answer 2 · answered Jul 08 '14 at 08:54

For me the switch to Lightbox2 doesn't work because I have currently no jquery in my project ... so here the steps to bring it on with Openlayers 2.13.1

At first initialize lightbox manually. A given onload function in the body tag seems to overwrite the standard initialization in lightbox.js

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

Next step is to add the onclick function to your image thumbs by hand. Normally lightbox does this for you, but the popup content is loaded dynamic after click on a feature symbol. The image link should look in a way like this

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

After this changes the image loading should work. Unfortunately the picture is shown behind the map. A simple change of css solve this problem.

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

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

Hope it helps somebody :-D

Lightbox Gallery in OpenLayers PopUp

2 Answers2