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

[rodolphebrd]

Bonjour,

on peut voir la page en ligne ?

[NoSmoking]

Bonjour,
si tu gères cela en javascript, il te faut attendre que l'image soit chargé pour pouvoir redimensionner son conteneur.

[encoremoi21258]

Bonsoir

Désolé j'avais oublié le plus important.

Voilà : http://fan-de-mixmaster.legtux.org/s...hots_page1.php
Là c'est le CSS qui pose problème (voir mes copie d'écran dans le premier message) lorsque l'image est plus petite.

Bonne nuit

[rodolphebrd]

J'appliquerais le style au DIV suivant :

Code :

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

1
2
3
4
5
6
7
8
#boxcontent{
   position: fixed;
   left:0;
   right:0;
   margin:0 auto; 
   z-index: 10000;
   width: 810px;
}

Je supprimerais tous les styles du DIV #box en ne laissant que le border.

Après il serait intéressant d'enlever toutes les déclarations qui ne servent à rien et de comprendre ce que tu écris. Et de commencer par le commencement c'est à dire les tutos du forum : Les meilleurs cours et tutoriels CSS

[encoremoi21258]

Bonjour

J'ai fais ce que vous avez proposé mais maintenant il y a plusieurs problèmes :
- Quand j'actualise la page je vois "Titre" en haut ainsi qu'un cadre au contour noir
- Quand je clique sur une image elle est complètement en bas ce qui empêche de voir le titre qui est marqué dessous
- Quand je clique sur une petite image (il y en a 4 sur la page) elle n'est pas du tout centrée.

Effectivement, je ne maîtrise pas bien le CSS mais c'est quand même compliqué de mettre les bons paramètres dans chaque div afin que chaque image qu'importe sa taille s'affiche correctement au milieu avec le titre dessous et cela qu'importe la taille de l'écran du PC.

Bonne soirée