Lightbox Opera problem.

[Schmoopy]

Ok really strange, lightbox is working in IE and FF but in Opera, the overlay loads up and then it stops loading, but no image comes up, just the overlay, what the hell is up with it? Really confusing.

Link to page here: http://bristoldnb.co.uk/

Just click on any of the "flyer" links and you'll see the problem.

Edit: Ok, I've realised the image does show up, but you have to scroll down a fair bit, still something wrong though =/

Any advice on how to fix this?

[jscheuer1]

I can say that it is at least partly due to the unusual layout, perhaps also in part due to one or more of Opera's generally unique (though often more standard) approaches to interpreting javascript and style.

You (or someone) would basically have to trace through the lightbox code to find where Opera should branch and to what to get the desired result, that or use a more basic layout.

In the lightbox script, it would probably be a place or places where the top style property is being set, and/or that the height of the page/window is being determined that needs tweaking for Opera with this layout.

In case you don't already know this, Opera may be made to exclusively follow:

if (window.opera){
/* do Opera only stuff here */
}

[Schmoopy]

Ok, well since I'm not really a JavaScript guru I can see what you mean and I can see that the top style property is being set in the following code:

        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
        var lightboxLeft = arrayPageScroll[0];
        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
        
        this.changeImage(imageNum);

But wouldn't really know where to go from here after putting in the if (window.opera) { }

[jscheuer1]

        // calculate top and left offset for the lightbox 
        var arrayPageScroll = document.viewport.getScrollOffsets();
        var lightboxTop = arrayPageScroll[1] + ((window.opera? window.innerHeight : document.viewport.getHeight()) / 10);
        var lightboxLeft = arrayPageScroll[0];
        this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

[Schmoopy]

Great, fixed