Comment faire un effet lightbox sans embarquer de Framework ?

par Philippe | Publié dans Optimisations |  | 

Si vous n'êtes pas Web 2.0, ce truc est pour vous. Il s'agit de faire un « pseudo » effet Lightbox sans embarquer des kilos de code de framework tels ceux des « Mootools », « JQuery » et autres « Prototype ».

Si comme moi vous êtes resté au Web 1.0 et qu'embarquer des kilos de code pour des effets bling-bling vous fait craindre l'embonpoint de votre site Web, il existe des solutions comme celle qui suit.
Tous les webmestres connaissent la lightbox pour présenter des images, un message, un formulaire et mettre en valeur le contenu en assombrissant le reste de la page. Agréable pour le visiteur.

En s'appuyant sur le DOM et le moteur d'interprétation Javascript qu'embarque les navigateurs, on peut réaliser un pseudo effet Lightbox sans peine. Pas de fioritures : il s'agit uniquement d'obscurcir le fond de page quand d'un clic l'image en taille réelle est appelée.

Exercice pratique :
Pré-requis: disposer de 2 images. La grande qui va s'afficher dans la boîte que l'on va appeler, et la petite, une vignette disons de 25 % de la taille de la grande.

1/ Créez un conteneur pour votre vignette

1. div.vign {
2. float: left;
3. margin-right: 8px;
4. background: transparent;
5. border: 4px solid #FFCC00
6. }

Vous pouvez habiller votre vignette de vos atours, l'important c'est qu'elle float

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

1. .window_obscur {
2. z-index :99;
3. display: none;
4. position: fixed;
5. top: 0%;
6. left: 0%;
7. width: 100%;
8. height: 100%
9. filter: alpha(opacity=80);
10. -moz-opacity: 0.8; opacity:.80;
11. background: black } 4px solid #FFCC00
12. }

Idem : ici il n' y a que la ligne 10 qui puisse être changée.

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

1. .window_content {
2. z-index :100;
3. position: absolute;
4. display: none;
5. overflow: auto;
6. left: 0%;
7. background: #000
8. border: 16px solid #FFCC00;
9. }

Il n'y a ici que les lignes 7 et 8 que vous pouvez changer.

4/ Création du lien de fermeture de la fenêtre

1. .window_content a {
2. display: block;
3. font-size:1.6em;
4. font-weight: 700;
5. color:#000;
6. background: #FFCC00 url(button-close.png) no-repeat left 84%;
7. padding-left: 30px;
8. padding-top:10px;
9. text-decoration: none
10. }
11. .window_content a:hover {
12. background: #FFCC00 url(button-close-hover.png) no-repeat left 84%;color:#999
13. }

Ici tout est permis.

4/ Création du code HTML

<div class="vign">
<a href = "javascript:void(0)" 
onclick = "document.getElementById('large')
.style.display='block';document.getElementById('small')
.style.display='block'">
<img src="CydCharisse-1954-vign.jpg" alt="Cyd Charisse, 
au faîte de sa gloire en 1954" /></a>
</div>

<div id="large" class="window_content">
<img src="../artimg/CydCharisse-1954.jpg" 
alt="Cyd Charisse pour la nouvelle année 1954" />
<a href = "javascript:void(0)" 
onclick = "document.getElementById('large').style.display='none';
document.getElementById('small')
.style.display='none'">Fermer la fenêtre</a></div>
<div id="small" class="window_obscur"></div>

Fermer la fenêtre

J'ai bien essayé de le compliquer mais je n'y suis pas arrivé. Testé sous Firefox 3x, IE 7x et Opera 9x, ça fonctionne.

On peut sans doute l'améliorer. Notamment pour l'accessibilité : en effet, si Javascript n'est pas activé dans le navigateur de l'internaute, la grande image ne sera pas affichée.
Je n'ai pas trouvé le « truc » pour afficher celle-ci dans une fenêtre séparée. Peut-être aurez-vous une idée ?

Ils ont dit :

Les champs signalés par le signe doivent être remplis.

Nom :

Site Web :

Commentaire:

Merci de recopier ci-dessous le code de sécurité :
Si vous n'arrivez pas à distinguer les lettres, cliquez sur la boîte pour obtenir une autre combinaison.
Merci de votre compréhension.