Laden Sie NeoFrag herunter
Anmelden

[Tuto] - lightbox 100% CSS, sans javascript

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

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
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" !
Rückkehr
4 Teilnehmer
3 Antworten
F3nix

15 Fach, 165 Antworten
Ungelesene Nachricht
Merci pour ce petit tuto x)
Guilac

17 Fach, 80 Antworten

Geber
Ungelesene Nachricht
Merci pour le tuto oui :)
Candac

10 Fach, 96 Antworten
Ungelesene Nachricht
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 !
Rückkehr