Lightbox compatible with Internet Explorer 7
The fixed value of the position attribute is a problem for Internet Explorer 7. If not used, must be added to the vertical position the offset of the top of the window on the page.
Then we touch one of the great problems of compatibility between browsers: each uses different properties.
The search for consistency led us to build out a test page, where the tests are fairly inconclusive.
Aligning the top of the lightbox with Gecko and Webkit
With browsers using these renderers, including Firefox for the first and Chrome for the second, the position must be "fixed". When this occurs, certain properties position objects based on the current view regardless of its position in the page, which suits us perfectly.
We must then:
- Get the height of the current view.
- Add an offset, which depends on the size of the box.
What is done with the following code, firstly we calculate the height:
if(document.documentElement && document.documentElement.clientHeight)
Then addition of an offset in the view and change of the position to fixed.
var top = (viewHeight() - box.offsetHeight ) / 2;
box.style.top = top + 'px';
We also assign to filter this fixed position: it can so cover the entire page, which is not the case otherwise.
Offset with Internet Explorer
The attribute fixed is not implemented in IE, but we can do without it because it is possible to find the offset of the view on the page:
x = document.documentElement.scrollTop + document.body.scrollTop +
box.offsetHeight / 4;
box.style.top = x + "px";
filter.style.top = document.documentElement.scrollTop + document.body.scrollTop;
Unlike other browsers, the top property has an absolute value on the page.
The same with the filter that applies only to the view and not to the page.
To view an image in a lightbox, click on the corresponding thumbnail ...
The scrolling code will be integrated into further versions of the lightbox: Ajax, shaded, form.