Télécharger NeoFrag
Connexion

[Tuto] - lightbox 100% CSS, sans javascript

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

38 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
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" !
Retour
4 participants
3 réponses
F3nix

15 sujets, 165 réponses
Message non lu
Merci pour ce petit tuto x)
Guilac

17 sujets, 80 réponses

Donateurs
Message non lu
Merci pour le tuto oui :)
Candac

10 sujets, 96 réponses
Message non lu
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 !
Retour