Une Lightbox sans script| Le rédacteur Web et le décideur|

Comment faire un effet lightbox en css et sans javascript ?

Une Lightbox en CSS sans Javascript

9août2008

par Philippe | Publié dans Optimisations | |

En suite du billet sur la pseudo Lightbox sans Framework, je poursuis avec cette nouvelle Lightbox, cette fois ci, sans Javascript, avec une seule image et en CSS pure.

L'article précédent m'ayant fait découvrir que d'autres y avaient pensé avant moi, j'ai poursuivi mes investigations. Un certain Andreas Blixt dans une page cachée de son site en construction je suis un smiley propose une CSS Lightbox plus simple, et plus plus légère.

Cette fois plus de Javascript, plus de DOM utilisé et une seule image qui, grâce à la CSS, va être réduite pour devenir une vignette. Exercice pratique :

1/ Créez un conteneur pour votre vignette

div.vign {
float: left;
margin-right: 8px;
background: transparent;
border: 4px solid #FC0
}

Là aussi vous pouvez habiller votre vignette de vos atours, l'important c'est qu'elle float

2/ Générez votre vignette

a.lightbox img {height: 100px}

Voux allez utiliser la même image qui va être ici réduite de manière homothétique avec une hauteur de 100 pixels.

3/ Création du voile d'obscurcissement sur la page

a.lightbox:active span.f,
a.lightbox:focus span.f {
-khtml-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=80);
opacity: .8;
background: #000;
display: block;
height: 100%
width: 100%
position: fixed;
left: 0;
top: 0;
z-index: 1000
}

La ligne 7 qui concerne la couleur de fond peut bien sûr être changée.
Attention : prenez ce code plutôt que celui du site d'Andreas. La position doit être fixed pas absolute sinon le voile ne recouvre pas la totalité de la page.

4/ Création de la boîte d'affichage

a.lightbox:active img,
a.lightbox:focus img {
border:16px solid #FC0;
background:#FC0;
height: auto;
left: 50%;
margin: -250px 0 0 -310px;
overflow: hidden;
position: absolute;
z-index: 1001;
}

Pas de case de fermeture comme vous le noterez : il suffit de cliquer hors de l'image pour que celle-ci se referme automatiquement. Le code HTML atteint ici l'épure :

5/ Création du code HTML

<div class="lightbox-vign">
<a class="lightbox" href="#paco">
<span class="f"></span>
<img id="paco" alt="Paco, mon idiot de chien" src="paco.jpg"/>
</a>
</div>

Le ci-devant camarade syndiqué Bruno (voir son commentaire plus bas) nous donne la solution au fait que « Quelques inconvénients toutefois...
Dans Firefox et Internet Explorer 7, l'ouverture de la boîte fait remonter l'ascenseur en haut de la page. Assez ennuyeux. » Il suffit de donner une ID à l'image et placer celle-ci dans l'URL ainsi :

a href="#ID

et le tour est joué.

Un inconvénient toutefois :
Dans Opera 9x on peut cliquer où l'on veut, la boîte ne se referme pas. je suis un smiley
Pas testé sous d'autres navigateurs.
Peut-être pourrez-vous m'en dire plus ?

Du coup, le titre de ma page « Comment faire un effet Lightbox en CSS et sans Javascript ? » ne donne par conséquent plus la réponse mais pose quelques questions.
Si des maîtres ès CSS et Opera passent par là... je suis un smiley

Ils ont dit :

bruno bichet le 09.08.2008 @ 13:50

Effectivement ça remonte sous Firefox. Le problème vient du a href="#" qui pointe vers une ancre # vide, ce qui amènera tous les navigateurs à remonter par défaut en haut de la page.

Avec un ID sur img et en faisant pointer le href dessus ça devrait marcher, soit a href="#image" et img id="image"

Enfin, c'est une piste car je n'ai pas testé je suis un smiley

Philippe le 09.08.2008 @ 15:47

Excellent Bruno ! je suis un smiley
J'avais fait un essai avec une ancre à l'endroit de l'image sans résultat. Je reviens sur le problème, découvre ton message et : « Bon Dieu ! Mais c'est bien sûr » m'exclamé-je à l'instar du Commissaire Bourrel de mon enfance : il faut associer un ID à l'image.

Du coup ça commence à avoir de la gueule notre affaire.
Le code va être corrigé après l'envoi de ce commentaire.
Tous en choeur : merci Bruno !!

bruno bichet le 09.08.2008 @ 16:15

Hé hé, de rien de rien je suis un smiley En tout cas, c'est une solution sympa et léger pour faire une lightbox full CSS, bravo à toi !

Erik le 12.12.2008 @ 08:40

Bonjour,

La boîte se referme bien avec Opéra si on clique dans la page arrière. Je pense que c'est pour cette raison que le voile est en position absolute et ne recouvre pas toute la page chez Andreas. Il faudrait trouver un moyen pour fermer la boîte ergonomiquement en utilisant la page arrière.

Cependant, une question : Comment se referme la boîte ? Je ne trouve pas la ligne du CSS qui permet de faire ça.

Merci

Philippe le 12.12.2008 @ 10:28

Ah ?
Un clic hors de l'image ne la referme pas automatiquement ?
Sous quel navigateur ?

Erik le 12.12.2008 @ 13:29

Un clic hors de la l'image la ferme sur tous les navigateurs apparament, sauf sur Opéra où il faut cliquer hors du voile noir.

Philippe le 15.12.2008 @ 11:23

C'est tout à fait exact et très ennuyeux.
Je croyais avoir testé sous Opera ! Honte à moi !
Par contre je n'ai pas de solution sous le coude.

Erik le 15.01.2009 @ 14:06

Peut-être faudrait-il créer un bouton "fermer" qui rechange le CSS.

Je vais essayer ça tout de suite.

Philippe le 15.01.2009 @ 18:38

Hello ami Erik...
C'est sympa d'être revenu.
je n'ai pas eu le temps pour ma part de me pencher sur ce problème pour Opéra.
Si tu trouves la soluce je suis certain que tu reviendras la faire partager... et je t'en remercie d'avance.
Bien à toi,
Philippe

José le 01.02.2009 @ 15:21

Bonjour,
Ma question porte sur votre tutoriel appelé "*Comment faire un effet lightbox sans embarquer de framework* ?"

Je ne connais pas grand chose en code. J'ai essayé votre technique (dont le principe me plait) mais il y a un problème : le script fonctionne bien mais quand je lance le résultat dans mon navigateur en local (firefox 3) le code html (de l'étape 4) s'affiche dedans. J'ai pourtant fait un copier coller et placé le code entre les balises et . A noter que j'utilise Kompozer comme éditeur de pages. Il est gratuit mais il a la réputation de dénaturer parfois le code importé dedans. Pensez-vous que le problème vienne de là ?

Merci d'avance.

Philippe le 02.02.2009 @ 18:28

La réponse a été apportée au Sieur José par courriel.
La connaissance d'HTML et des CSS s'impose pour l'utilisation de cette méthode.

Shakermaker le 06.03.2009 @ 14:12

Bonjour,
j'ai mis en place ce code mais je me heurte a deux disfonctionnements :
-le premier, c'est l'effet fondu qui n'apparait pas, seule la lightbox apparaissant.
-le deuxième, c'est que la vignette sur laquelle on clique pour afficher la lightbox disparait une fois la lightbox apparue...
Voila si quelqu'un connait la solution et peut répondre, merci d'avance.

Jean-Marc le 29.04.2009 @ 14:34

super cette lightbox en css mais j'ai une question : comment y ajouter plusieurs photos?

Philippe le 30.04.2009 @ 08:44

C'est très simple : il suffit pour chacune des images d'indiquer une ID différente.

David le 24.06.2009 @ 09:14

Bonjour,
Tout d'abord merci beaucoup pour ce code aussi léger qu'efficace je suis un smiley
J'ai essayé de l'intégrer dans mon site (qlq modifications au niveau des couleurs), sous firefox pas de problème, par contre j'ai quelques difficultés avec internet explorer:
-Les photos ne se referment pas lorsque je clique à côté.
-Parfois une autorisation (controle active x, script) m'est demandée. Si je n'autorise pas, le voile d'obscurcissement est noir opaque.
Note: ce ne sont pas mes seuls problèmes avec ie, notamment la légende des photos rollover dans le cadre de droite ne s'affichent pas correctement...
Je joint ci-dessous la css et le html dune photo prise de la page http://www.kinesthetik.com :
html:
Menton

AVANT - APRES

css:
div.vign {
float: left;
margin-right: 8px;
background: transparent;
border: 4px solid #CC99FF;
}

a.lightbox img {
height: 120px;

}

a.lightbox:active span.f,
a.lightbox:focus span.f {
-khtml-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=80);
opacity: .8;
background: #000;
display: block;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000
}

a.lightbox:active img,
a.lightbox:focus img {
border:16px solid #63C;
background:#FC0;
height: auto;
left: 50%;
margin: -250px 0 0 -310px;
overflow: hidden;
position: absolute;
z-index: 1001;
}

D'avance merci pour votre aide, ie commence à me rendre fou!!

David le 24.06.2009 @ 09:17

désolé fou et distrait,
la page http://www.kinesthetik.com/Epilation.htm
le code html:
Menton

AVANT - APRES

David le 24.06.2009 @ 10:21

Un gros problème de résolu,

cette balise permet de forcer l'affichage d'internet explorer. Texte bien alignés dans le cadre et lightbox se referme.
Subsiste le problème d'autorisation et du voile d'opacicement plutot que d'obscurcissement...