132 views

[Tuto] - lightbox 100% CSS, sans javascript

Zaekof

Member offline

38 topics 889 replies

donors Contributors
28/10/2015 11:50 Unread message
Bonjour à tous,

Aujourd'hui j'aimerais vous montrer comment faire une lightbox en css sans js. Serte c'est pas vraiment esthétique mais je travail encore dessus ^^

screens :

https://i.gyazo…
https://i.gyazo…
Cette LightBox repose sur la pseudo class, :target, issue des spécifications du CSS3. Elle est donc compatible avec les browsers suivants:
  • Firefox 1.5+
  • Safari 3.2+
  • Chrome 2+
  • Opera 9.5+
Utilisation:

Le principe est de récupérer le lien de l'ancre contenu dans une URL qui peut-être référencé dans la feuille de style en utilisant la
propriété :target.
Si l'ancre correspond à l'identifiant d'un élément html, les styles css correspondants s'afficheront.

le code css a intégrer dans le live editor dans un widhet html ! <style type="text/css">
.lightbox
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgba(0,0,0,0.7);
}
.lightbox a
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.lightbox_container img
{
background: #ffffff;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.lightbox:target { display: table; }
</style>


donc comme vous pouvez le voir je le place entre les balise style, vous pouvez modifié les divs si vous voulez

le html que l'on viens intégrer après le css :

<a href="#lightbox_img1">
<img
src="https://i.gyazo.com/e4c9c011d75e8e1e50778da0a015da87.jpg"
width="100"
height="102"
alt="......"
id="lightbox01"
/>
</a>

<div class="lightbox" id="lightbox_img1">
<a href="#close" title="Close light box">
<img
src="https://i.gyazo.com/a10881741b935d806526781982ab6770.jpg"
alt="....."
width="600"
height="639"
/>
</a>
</div>




pour fermer ensuite la lightbox cliquer sur le contour noir.
Voilà c'est pas grand chose mais bon si ça peut d'épanner quelqu’un c'est cool ^^

Cette fonction existe aussi sous boostrap si je me souvient bien.
"N'arrêtez jamais d'apprendre" !
4 participants

3 replies

F3nix

Member offline

14 topics 166 replies

28/10/2015 14:36 Unread message
Merci pour ce petit tuto x)

Guilac

Member offline

17 topics 80 replies

donors
16/11/2015 18:09 Unread message
Merci pour le tuto oui :)

Candac

Member offline

10 topics 96 replies

02/06/2016 02:14 Unread message
Hello !

Premièrement merci pour se tuto bien utile ! Il y a juste un petit quelque chose, la lightbox prend au maximum la largeur du "row" si je me trompe pas, une idée de comment la rendre indépendente et de se fait prendre la larger de toute la page web ?

Autre chose, j'ai essayer de faire en sorte que de base la lightbox soit ouverte lorsque quelqu'un ouvre le site. Pour le faire j'ai pris l'extension dans le lien URL lorsque la box est ouverte, je l'ai ajouté au lien du menu (via le live editor) mais j'imagine qu'il existe une fonction en php pour évité de bidouiller ?

Merci merci !