Discussion :

[encoremoi21258]

Bonsoir

Mon site contient de nombreuses images qui sont affichées en petit, un clique permet de les agrandir. Pour cela j'utilise une lightbox. Il y a très peu de codes mais malheureusement je n'y arrive quand même pas.
Tout d'abord, voici ce que ça donne avec le code actuel :



Malheureusement je pense que c'est pas centré sur tous les PC, de plus avec les images de taille différente ça fait moche :



J'ai un peu modifié le code mais je suis obligé de jouer avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width: 600 px; 
margin-left: -315px;

afin de centrer le tout, ce qui n'est vraiment pas pratique car ce n'est pas automatique en fonction de la taille de l'image. Voici ce que j'obtiens :



Je souhaite donc que ma lightbox soit centrée horizontalement et verticalement et que ça s'adapte automatiquement à la taille de l'image. J'ai cherché plusieurs heures mais je suis vraiment perdu.

Voici le CSS pour ce qu'on voit sur la dernière image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
54
55
#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;
	height:auto;
	max-height:auto !important;	
	margin-left: auto;
    margin-right: auto;
	text-align: center;
	border: 2px solid black;
	background-color: white;
	z-index:10000;
	background-color: #8E8E8E;
	top: 50%;
    left: 50%;
    margin: -166px 0 0 -166px;
	width: 600 px; 
	margin-left: -315px;
}
 
 
#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;
}

Sur ma page html j'ai également mis ces lignes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="shadowing"></div>
<div id="box">
    <div id="boxcontent"  onclick="closebox()">  </div> 
    <div id="boxtitle"> Titre </div>
</div>

Et enfin le JavaScript qui permet entre autre de placer le texte de mon choix sous l'image :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function openbox(url,titre){ 
	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';	
}
 
 
function closebox(){
	document.getElementById('box').style.display='none';
	document.getElementById('shadowing').style.display='none';
}

Et j'intègre le tout à ma page avec

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<center><img src="screens/52_reduit.jpg" onclick="openbox('screens/52_reelle.jpg','27 septembre 2014');" alt="mixmaster"/></center>

Le problème est uniquement lié au CCS mais bon je vous le donne quand même.

Auriez vous une idée ?

Une piste ?

Merci d'avance