Bonsoir
Avec de l'aide concernant le raisonnement, j'ai mis en place une solution pour pallier au problème de centrage.
Donc en résumé :
Sur ma page html j'inclus un fichier javascript :
<script src="lightbox-image.js" type="text/javascript"></script>
Sur la page html je met un bout de code qui va indiquer à la lightbox comment positionner les différentes div (moi je l'ai placé sous le menu) :
1
2
3
4
5
| <div id="shadowing"></div>
<div id="box">
<div id="boxcontent" onclick="closebox()"> </div>
<div id="boxtitle"> Titre </div>
</div> |
Sur la page html j'insère les images ainsi :
<div id="screenshots"><img src="le lien vers l image taille reduite qui sera affichee" onclick="openbox('le lien vers l image taille reelle qui sera affichee dans la lightbox','un titre qui sera sous l image','la largueur de l image en nombre de pixels');"/></div>
Je suis obligé d'insérer la largueur de l'image qui sera dans la lightbox car depuis le javascript je ne peux récupérer que la largueur de
<img src="le lien vers l image taille reduite qui sera affichee">
hors il faut récupérer la largueur de celle qui sera dans la lightbox afin de la centrer.
Ensuite dans le CSS :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| #shadowing{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #CCA;
z-index:10000;
opacity:0.6;
filter: alpha(opacity=50);
}
#box {
display: none;
position: fixed;
text-align: center;
padding: 0px;
width: auto;
height:auto;
max-width:auto !important;
max-height:auto !important;
left: 0px;
border: 2px solid black;
background-color: white;
z-index:10000;
background-color: #8E8E8E;
}
#boxcontent{
left:0;
right:0;
bottom:0;
margin:0;
padding: 8px;
overflow: auto;
width:100%;
height:100%;
z-index: 10000;
}
#boxtitle{
left:0%;
width:100%;
height:20px;
padding:0;
margin:auto;
color:black;
text-align:center;
z-index: 10000;
} |
Déjà mieux que mon système de marge négative que j'avais avant sachant que ça ne centrais pas sur les écrans différents du mien. Je n'ai pas mis de dans le code lié à la lightbox car il se trouve déjà dans le code de la div qui englobe tout le contenu de ma page.
Pour finir, le javascript :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| var largF = null;
function openbox(url,titre,larg_lightbox)
{
calclargueurecran();
var box = document.getElementById('box');
document.getElementById('shadowing').style.display='block';
var title = document.getElementById('boxtitle');
title.innerHTML = titre;
var content = document.getElementById('boxcontent');
content.style.padding="0";
content.innerHTML = "<img src=" + url + " />";
box.style.display='block';
var l =(parseInt(largF,10)-(parseInt(larg_lightbox,10) ))/parseInt("2",10);
l=l+'px';
document.getElementById('box').style.left= l;
}
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none';
}
function calclargueurecran()
{
if (typeof(window.innerHeight)=='number')
{
largF = window.innerWidth;
}
else
{
if (document.documentElement&&
document.documentElement.clientHeight) {
largF = document.documentElement.clientWidth;
}
else
{
if (document.body&&document.body.clientHeight) {
largF = document.body.clientWidth;
}
}
}
largF = largF - parseInt(19,10);
} |
A la fin je retire 19 pixels pour la largueur de la scollbar de droite qui est incluse dans largF mais que je dois retirer pour centrer correctement. C'est de la bidouille mais ça centre correctement à 1 millimètre près, ce qui me suffit.
Si vous ouvrez la même image que celle affichée sur la page html, vous pouvez utiliser la solution suivante : http://www.developpez.net/forums/d18...rc/#post128372 et ainsi larg_lightbox ne devra pas être passé en paramètre à la fonction mais pourra être calculé directement dans le javascript. Cependant, je le déconseille car l'image que moi j'affiche sur la page html a un poids plus faible et une taille plus faible que celle de la lightbox ce qui permet de diminuer le temps de chargement de la page. Après tout, ce n'est qu'un nombre à marquer en paramètre à la fonction, rien de compliqué à trouver dans les paramètres de l'image après avoir fait un clique droit dessus 
Voilà, j'espère que mon explication pourra aider quelqu'un qui a le même soucis.
Bonne nuit
Centrage horizontal pour ma lightbox
Répondre avec citation
Partager