Download NeoFrag
Connection

[Tuto] - lightbox 100% CSS, sans javascript

134 views
[Tuto] - lightbox 100% CSS, sans javascript
Zaekof

38 subjects, 883 replies

Contributors donors
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" !
Return
4 participants
3 replies
F3nix

15 subjects, 165 replies
Unread message
Merci pour ce petit tuto x)
Guilac

17 subjects, 80 replies

donors
Unread message
Merci pour le tuto oui :)
Candac

10 subjects, 96 replies
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 !
Return