What is the logic behind Lightbox 2 about where to place the popup?
What is the logic behind Lightbox 2 about where to place the popup?
It looks like when using Firefox or Chrome it shows up in different places on different pages. Is there any setting to make it appear on one page on one page for consistency?
What is CSS or the logic used to determine positioning?
source to share
How is it displayed in different places, what is your desired behavior and can you provide a sample page?
This is how the script itself calculates the top position of the popup (lightboxes v2.04, zip download, js / lightbox.js, lines 229ff):
// 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();
Since the script uses the Prototype document.viewport object , the script will position the popups at 10% at the current scroll position, like so:
------- page start
|
|
|
|
|
------- scroll position top
|
------- start of lightbox popup
|
|
|
|
|
|
|
|
------ scroll position bottom
|
|
|
|
------ page end
source to share
I know this is a very old thread, but still top 5 Google results. IE / FF gives me good results, but Chrome doesn't. To make them all agree,
line 231 from js / lightbox.js
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
was changed to
var lightboxTop = arrayPageScroll[1] + (100);
Not exactly what was requested, but the pages are now compatible.
Info taken from http://www.lokeshdhakar.com/forums/discussion/5494/fixed-display-position-problems-with-firefox-but-not-ie-on-tall-webpages/p1
source to share
On line 231, lightbox.js
adjust the division by 10: 100 as follows:
document.viewport.getHeight() / 100
Sample code:
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 100); //
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
source to share
You can try Flowplayer:
http://flowplayer.org/tools/demos/index.html
You can set the position and size of your overlay via the CSS file to wherever you want.
source to share