Question sur la simulation "illégale" d'une Lightbox

Question

Meg123

12 Sep 2007 à 11:52

Bonjour à tous,

Je commence tout de suite par vous avertir que ce que j'ai fait est "illégal" et que j'en suis consciente. En fait, la mise en page que j'ai faite de ma galerie, simulant grossièrement une Lightbox, ne fonctionne que sous Firefox. Pour couronner le tout, je ne comprends pas à 100% le code que j'ai pondu.

Voici un aperçu de ma feuille CSS :


img.TestImageV {
  display: none;
}
a:focus img.TestImageV {					/* Propréiéts de la zone d'image de la "LightBox" */
  position: absolute;					/* Seule la position absolute fait apparaître le texte au dessur de l'image */
  margin-top: 50px;						/* Définition d'un margin pour éviter que l'image ne masque le texte */
  display: block;						/* Le "display" doit être "block" ou "inline. L'un affiche normalement l'image, l'autre la décale sur le droite. Si la propriété n'est pas donnée, l'image n'apparaît pas */
  border-width: 0px;					/* Réduction des marges à zéro pour faire disparaître les propriétés "hover" et "focus" de "Lien_Image" */
  cursor: -moz-alias;					/* Modification de la forme du curseur (pour les navigateurs basés sur Gecko uniquement) */
  opacity: 1;							/* Force l'image à rester pleinement visible bien que l'élément parent cherche à imposer sa propre valuer "opacity: 0.5" */
}
span.SpanImageV {
  display: none;						/* On masque le span en consultation normale. Il faudra passer la souris ou sélectionner l'élément pour le faire apparaître */
}
a:focus span.SpanImageVLightbox {			/* Span occupant tout l'écran entre la galerie et le span contenant l'image pour simuler une lightbox et éviter que "opacity" n'agisse sur la photo */
  position: fixed;						/* Défintion de la position par rapport à l'écran et en dehors du flux normal */
  top: 0px;								/* Définition des écarts entre le span "LightBox" et l'écran qui étire l'élément pour éviter de définir le span en absolu */
  right: 0px;
  left: 0px;
  bottom: 0px;
  display: block;
  background-color: black;				/* Ton du voile qui s'interposera entre la galerie et l'image agrandie. on pourra utiliser n'importe quelle couleur */
  cursor: -moz-alias;					/* Définition de la forme du curseur pour la zone cadre "LightBox" (i.e. span) */
  z-index: 1;							/* Positionnement en dessous de l'élément contenant l'image agrandie pour ne pas lui imposer son "opacity" */
  opacity: 0.6;							/* Degré d'opacité du voile qui donnera l'impression d'une "LightBox" */
}
a:focus span.SpanImageV {
  position: fixed;						/* Défintion de la position par rapport à l'écran et en dehors du flux normal */
  display: block;						/* Le "display" doit être "block" ou "inline. L'un affiche normalement l'image, l'autre la décale sur le droite. Si la propriété n'est pas donnée, l'image n'apparaît pas */
  -moz-border-radius: 15px;				/* Arrondi des angles (pour les navigateurs basés sur Gecko uniquement) */
  top: 20px;							/* Ecart entre le span difusant l'image et le bord de la fenêtre de navigation */
  left: 20px;
  background-color: transparent;		/* La transparence laissera apparaître le voile sur la gallerie donnant l'illusion que seule l'image se superpose */
  cursor: -moz-alias;					/* Définition de la forme du curseur pour la zone cadre "LightBox" (i.e. span) */
  z-index: 2;							/* Positionnement au dessus de l'élément grisant la galerie pour ne subir son "opacity" */
  opacity: 1;							/* Force l'image à rester pleinement visible bien que l'élément parent cherche à imposer sa propre valuer "opacity: 0.6" */
}
a:active img.TestImageV,
a:active span.SpanImageV {
  display: none;						/* On masque le span et l'image lorsque l'on clique dessus */
}

Voici maintenant le code html de ma page de test :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="../style1.css" rel="stylesheet" type="text/css" media="all">
<title>Affichage images</title>

    <body>

	<div class="Page">

        <div class="Titre">

			<h1>NOTRE VIE DE TOUS LES JOURS</h1>
		</div>

		<div class="spacer">&nbsp;</div> 
		
		<br>
		<br>


<div class="IndexB">
	<table id="indexB">
		<tr>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_01.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_01.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_01.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_02.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_02.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_02.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_03.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_03.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_03.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_04.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_04.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_04.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_05.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_05.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_05.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_06.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_06.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_06.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_07.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_07.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_07.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_08.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_08.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_08.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
		</tr>
		<tr>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_09.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_09.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_09.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_10.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_10.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_10.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_11.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_11.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_11.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_12.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_12.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_12.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_13.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_13.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_13.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_14.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_14.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_14.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_15.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_15.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_15.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_16.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_16.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_16.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
		</tr>
		<tr>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_17.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_17.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_17.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_18.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_18.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_18.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_19.jpg"><span class="SpanImageV"><img class="TestImageV" src="span_style1.css/ballade_070613_19.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_19.jpg</h2></span><span class="SpanImageVLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_20.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_20.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_20.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_21.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_21.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_21.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_22.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_22.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_22.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_23.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_23.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_23.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_24.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_24.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_24.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>

		</tr>
		<tr>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_25.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_25.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_25.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>
			<td><a href="#nogo" class="LienApercu"><img src="./miniature/ballade_070613_26.jpg"><span class="SpanImageH"><img class="TestImageH" src="span_style1.css/ballade_070613_26.jpg"><h2>ID&nbsp;Fichier&nbsp;:&nbsp;ballade_070613_26.jpg</h2></span><span class="SpanImageHLightbox"></span></a></td>


		</tr>
	</table>
</div>

</div>

</body>
</html>

Mes questions sont donc les suivantes :
- Mettons momentanément de côté l'aspect restrictif du code (c'est-à-dire, sa non conformité aux standards). Les éléments que j'utilise, ma façon de les organiser et les propriétés que je leur attribue font-ils de ma page une page acceptable (bien qu'elle ne le soit pas).
- Comment se fait-il que je parvienne à faire apparaitre les éléments de classe SpanImageV et TestImageV par simple clic alors que je n'ai défini que le focus et que je puisse tout de même les refermer par simple clic (j'ai donné la propriété display:none au pseudo élément :active et je pensais qu'il interdirait l'affichage de l'image).
- Ma dernière étape sera de centrer l'image dans la fenêtre du navigateur, et là, je sèche. Quelqu'un a une idée ?
- Je prends toutes les observations sur le code.

J'ai trouvé ça en bidouillant et en faisant pleins d'erreurs. Finalement j'ai obtenu quelque chose de proche de ce que je voulais, mais je ne saisis pas tout. C'est bête hein Smiley murf

.

Meg

Meg123

13 Sep 2007 à 09:39

Bonjour à tous,

Pour préciser un peu l'idée (je vois bien que le code est indigeste), je vous mets un lien vers une page qui donne un exemple de ce que j'ai réussi à obtenir. Attention, IE ne verra rien... Je ne peux me prononcer que pour FireFox.

Ne faites pas attention aux erreurs PHP. Je n'ai pas eu le temps de faire une page propre en revisitant tout mon code. Il y a des lignes d'erreurs toutes moches, mais le principale est que l'on peut voir l'effet donné par la simulation de LightBox (avec que du CSS).

http://lossless.trade.free.fr/index.php

Merci d'avance pour vos remarques et bonne journée Smiley biggrin

,

Meg

Meg123

13 Sep 2007 à 10:03

Coucou,

Encore moi,

J'ai préféré vous montrer une page pas trop moche et ai donc créé un fichier HTML simple pour la démo.

Le lien deviens bien évidemment le suivant : http://lossless.trade.free.fr/index.html

Voilà, je vous ai tout donné.

Alors, qu'en pensez-vous ?

Meg

Sujet clos

CSS et mise en forme, CSS3

Question sur la simulation "illégale" d'une Lightbox