NeoFrag 다운로드
로그인

[Tuto] - lightbox 100% CSS, sans javascript

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

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
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 참가자
3 개
F3nix

15 과목, 165 개
읽지 않은 메시지
Merci pour ce petit tuto x)
Guilac

17 과목, 80 개

기증자
읽지 않은 메시지
Merci pour le tuto oui :)
Candac

10 과목, 96 개
읽지 않은 메시지
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 !
반환