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.

Answer 1

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