Blog
Tutoriels
CSS (3)
HTML (6)
- Photographie (1)
Photoshop (6)
WordPress (3)
Effet lightbox avec CSS
Posté le jeudi 05 juillet 2012
Affichez une image ou une galerie d’images avec un effet lightbox sans utiliser javascriprt ou JQuery.
Mais qu’est-ce qu’une lightbox déjà ? Vous avez sûrement déjà rencontré cet effet lorsque vous cliquez sur une vignette. Juste après le clic, l’image s’agrandi tandis que l’arrière plan s’assombri. Si vous n’êtes jamais tombé sur un effet lightbox, cliquez ici pour visualiser cet effet. Cet exemple sera aussi notre rendu final.
Création des fichiers
Créer un nouveau dossier que vous pouvez nommer ‘Lightbox’. Dans ce dossier, créez un dossier appelé css et un deuxième dossier appelé images. Ouvrez votre éditeur HTML (Dreamweaver, Notepad++, …) et créez un nouveau fichier que vous nommez ‘index.html’. Enregistrez le dans le dossier ‘Lightbox’ ou glissez-le à côté des dossiers ‘css’ et ‘images’.
Pour finir, toujours avec votre éditeur HTML, créez un nouveau fichier que vous enregistrez au format css et que vous nommez styles.
Vous devriez donc avoir un dossier appelé ‘Lightbox’ contenant :
- Un dossier nommez ‘css’ avec un fichier appelé ‘styles.css’
- Un dossier nommez ‘images’
- Un fichier nommez ‘index.html’ ou ‘index.htm’
La page HTML
Dans la page index.html ajoutez le code ci-dessous entre les balises <body> .
<div id="page"> <div id="contents"> <h1>Effet lightbox avec css</h1> <a href="#lightbox-boite1"> <img src="lightbox-img.jpg" alt="Visage bleu" height="250" width="540" /></a> </div> </div>
Les divs ‘page’ et ‘contents’, sont là pour nous faciliter le travail du design lorsque nous attaquerons la mise en page sous css. La balise <H1> peut devenir le titre de la page ou de la vignette sur laquelle vous appliquerez la lightbox.
Le lien
L’activation de la lightbox ne peut se faire que via un lien hypertexte. Cependant, le lien peut lui, être appliqué sur du texte, une image, etc. Dans ce tutoriel, la lightbox s’active via un lien image que vous pouvez télécharger ici. Ajouter le code ci-dessous juste après la balise <h1>
<a href="#lightbox-boite1"> <img src="lightbox-img.jpg" alt="Visage bleu" height="250" width="540" /></a>
a href est nommé “#lightbox-boite1″ pour appeler la lightbox lorsqu’on clique sur le lien.
L’image que vous avez téléchargé est donc le lien qui active la lightbox.
Structure de la lightbox
La page est maintenant créée. Pour la création de la lightbox, il faut utiliser une liste <ul><li> qui contiendra une première ligne <li> pour l’icône de fermeture et une deuxième ligne <li> pour la lightbox.
Après tout le code du contenu de la page que vous venez d’écrire et juste avant la balise </body> recopiez le code suivant :
<ul> <li> </li> <li> </li> </ul>
Pour identifier les différentes balises dans le css, mettez sur cette liste plusieurs ID permettant par la suite de pouvoir plus facilement définir leurs styles.
Mettez donc à jour le code que vous venez d’écrire de cette manière :
<ul id="lightbox"> <li id="close"></li> <li id="lightbox-boite1"> </li> </ul>
Le contenu de la lightbox est inséré dans une div que nous appellerons ‘box’ qui elle-même sera intégrée dans la balise <li id=”lightbox-boite1″> </li> :
<ul id="lightbox"> <li id="close"></li> <li id="lightbox-boite1"> <div class="box"> </div> </li> </ul>
Si vous voulez avoir plusieurs vignettes sur la même page comme pour un portfolio par exemple, vous pouvez faire une <lia> avec une id “lightbox-boite1″, puis une autre avec une id “lightbox-boite2″, puis “lightbox-boite3″, et ainsi de suite.
Enfin, pour afficher l’image correspondant à la vignette sur laquelle l’internaute a cliqué, remettez le lien de l’image que vous aviez téléchargé au début du tutoriel dans la div ‘box’ et ajoutez : a href= “close” pour faire apparaître la petite icône pour refermer la lightbox. Téléchargez cette icône ici et sauvegardez-la dans le dossier images.
<ul id="lightbox"> <li id="close"></li > <li id="lightbox-boite1"> <div class="box"></div> </li> </ul>
Pour vérifier que toutes vos balises fonctionnent correctement, vous devriez avoir à l’écran un design similaire à l’image ci-dessous :
Liaison des fichiers
Maintenant, nous devons styliser la page HTML. Pour cela, nous utilisons les CSS ‘cascading style sheets’. Mais avant, vous devez faire une liaison entre ‘index.html’ et ‘styles.css’.
Ajoutez la balise <link> ci-dessous entre les balises <head> et </head> du fichier ‘index.html’.
<link href="css/styles.css" rel="stylesheet" type="text/css" />
Le design général
Dans le fichier ‘styles.css’, écrivez : html, body { }, pour indiquer que vous allez modifier l’aspect général de la page. Modifiez la hauteur et la largeur (width et height), les marges intérieure (padding) et extérieure (margin), la police de caractères (font-family), la taille du texte (font-size), la couleur du texte (color), la hauteur des lignes (line-height) et enfin la couleur du fond de la page (background-color).
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:#000;
background-color:#ade5f2;
}
Tester la liaison
Si vous avez gardé mes valeurs, vous devriez avoir à l’écran la même chose que l’image ci-dessous.
Si rien n’a changé par rapport à l’étape précédente, vérifiez que vous n’avez pas fait d’erreur sur la balise <linka> quand vous avez lié le fichier ‘index.html’ et le fichier ‘styles.css’.
Style du bloc de la page
Toujours dans ‘styles.css’, copiez le code suivant :
#page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
‘overflow’ sert à afficher la barre de défilement.
Style du bloc de contenu
Toujours dans ‘styles.css’, copiez le code suivant :
#page #contents {
margin-left:auto;
margin-right:auto;
width:540px;
background-color:#fff;
padding:20px;
overflow:auto;
}
Style du titre
Toujours dans ‘styles.css’, copiez le code suivant :
#page #contents h1 {
margin:0 0 20px 0;
padding:0px;
font-size:3em;
color:#333;
}
Style du texte
Toujours dans ‘styles.css’, copiez le code suivant :
#page #contents p {
line-height: 20px;
}
Effet général de la lightbox
Le style css pour créer l’effet lightbox se compose en plusieurs étapes. Voyons ici le style général de la lightbox :
#lightbox {
margin: auto;
padding: 0;
width: 100%;
height: 100%;
list-style: none;
text-align: left;
overflow: hidden;
}
Style des lignes li
Le style permettant de créer le fond transparent qui vient se poser sur l’ensemble de la page lors du clique sur la vignette :
#lightbox li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.6);
padding-right: 50px;
paddin-left: 50px;
}
Enfin, pour que la box ne s’affiche que lorsque l’utilisateur clique sur l’image ou le lien, vous utilisez css pour cacher temporairement la ligne. Pour cela, placez la ligne #close en dessous du contenu (z-index) et finalement, mettez le background en transparent (background-color) :
#lightbox #close {
background-color: transparent;
z-index:-1;
}
Style de la box
Toujours dans styles.css, écrivez ’#lightbox .box { }’ et modifiez le positionnement (position, left et top), selon votre convenance, la marge extérieure de gauche (margin-left) et la marge intérieur (padding) et la couleur de fond (background-color) comme ci-dessous :
#lightbox .box {
position: absolute;
width: 540px;
background-color:#fff;
top:100px;
left: 50%;
margin-top: -20px;
margin-left:-335px;
padding: 15px;
}
Style du bouton fermer
Lorsque la lightbox est ouverte, il est possible de la fermer grâce à un bouton positionné en haut à droite ( vous pouvez télécharger l’image ici.) Enregistrez l’image téléchargée dans le dossier ‘images’ de votre projet et suivez le code css ci-dessous :
.box a.button-close {
position: absolute;
top: -10px;
right: -10px;
display: block;
height:22px;
width:22px;
background:url(../images/icone_close.png) 0 0 no-repeat;
}
.box a.button-close:hover {
background:url(../images/icone_close.png) 0 -22px no-repeat;
}
C’est terminé. Si vous voulez rendre l’effet un peu moins brutal, vous pouvez toujours ajouter un peu de javascript. Enregistrez toutes vos modifications et testez. Si vous avez un problème, vérifiez bien chaque lignes ou laissez un commentaire !
Posté dans CSS, HTML | 3 commentaires
Vos commentaires
J’ai finalement trouvé et merci pour se super tuto !!!
Bonjour Ryan,
Je suis content que vous ayez trouvé une solution à votre problème.
Bonne continuation à vous.
Bonjour,
J’ai suivi tout le tutoriel mais j’ai un problème avec ma page styles.css car l’image ne veut pas se fermer. En gros ça donne ça avec les mêmes variables que dans le tuto allianzland.com
Je ne trouve pas l’erreur !!!
Merci d’avance pour votre aide !