Lightbox compatible avec navigateurs anciens
La valeur fixed de l'attribut position pose problème à d'anciens navigateurs. Si on ne l'utilise pas, il faut alors ajouter à la position verticale, le déplacement du haut de la fenêtre sur la page.
On touche alors un des grand problèmes de compatibilité entre les navigateurs: chacun utilise des propriétés différentes.
La recherche de compatibilité nous a conduit à réaliser une page de tests, dont les essais sont assez peu concluants.
Alignement du haute de la lightbox avec Gecko et Webkit
Sous les navigateurs utilisant ces moteurs de rendu, notamment Firefox pour le premier et Chrome pour le second, la position doit être "fixed". Lorsque c'est le cas, certaines propriétés positionnent les objets en fonction de la vue courante quelle que soit sa position dans la page, ce qui nous convient parfaitement.
Il nous faut alors:
- Obtenir la hauteur de la vue courante.
- Y ajouter un décalage, qui dépend de la taille de la box.
Ce qui se fait avec le code suivant, d'abord le calcul de la hauteur:
if(window.innerHeight) return(window.innerHeight);
if(document.documentElement && document.documentElement.clientHeight)
return(document.documentElement.clientHeight);
if(document.body) return(document.body.clientHeight);
return 50;
Puis l'ajout d'un décalage dans la vue et le changement de position en fixed.
box.style.display='block';
var top = (viewHeight() - box.offsetHeight ) / 2;
box.style.top = top + 'px';
box.style.position='fixed';
filter.style.position='fixed'; Nous donnons aussi au filtre cette position fixed: cela permet de couvrir la page toute entière, ce qui n'est pas le cas autrement.
Alignement avec anciens navigateurs
L'attribut fixed n'existe pas sous IE, mais nous pouvons nous en passer car il est ici possible de connaître le décalage de la vue sur la page:
box.style.display='block';
x = document.documentElement.scrollTop + document.body.scrollTop +
box.offsetHeight / 4;
box.style.top = x + "px";
filter.style.top = document.documentElement.scrollTop + document.body.scrollTop; Contrairement aux autres navigateurs, la propriété top à une valeur absolue dans la page.
On fait de même avec le filtre qui ne s'applique qu'à la vue et non à la page.
Démonstration
Le code de la box dans la page est le même que celui de la démonstration de lightbox avec images. Seul change le code JavaScript.
Pour afficher une image dans une lightbox, cliquer sur la vignette correspondante...
Le code de scrolling est intégré aux évolutions suivantes de la lightbox: Ajax, fondu, formulaire...