28172 sujets

CSS et mise en forme, CSS3

Effet lightbox en css

Bonjour à tous, après avoir cherché à plusieurs endroits comment faire un effet lightbox sans lightbox, je suis tombée sur ce lien:
http://www.webcssdesign.com/css/ligtbox-css/

qui permet de créer un effet lightbox 100% css.

Ce que je voudrais c'est qu'en cliquant sur les miniatures, la version en taille réelle s'ouvre avec cet effet lightbox au centre de l'écran.
Je souhaite donc intégrer cet effet à certaines pages de mon site, mais j'ai un peu de mal.
Je pense que je ne place pas les url de mes images au bon endroit.

Voici le code de ma page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

     <!--métas-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
     <!--titre-->
  <title>Document sans nom</title>
  
     <!--feuille de style-->
  <link rel="stylesheet" type="text/css" href="css/stylekamogo.css" />
     
     <!--script fondu-->
  <script type="text/javascript" src="javascript/fondu.js"></script>

</head>

<body>
  
     <!--conteneur-->
  <div id="conteneur">
  
     <!--div entête kanna-->
  <div id="entetekanna">
  </div>
  
  Cliquez sur les images pour les agrandir
  
     <!--div kan1-->
  <div class="kan1">
  <a href=#futurebox_img1">
<img src="images/catalogue/kanna/kan1grand.jpg" width="100" height="102"
alt="The CSS Ninja" id="futurebox01" /></a>

<div class="overlay" id="futurebox_img1">
<a href="#close" title="Close future box">
<img src="images/catalogue/kanna/kan1grand.jpg" alt="The Css Ninja" width="600" height="639" />
</a>
</div>
  </div>
  
     <!--div kan intérieur-->
  <div id="kan1interieur">  
  </div>
  
  </div>
  
</div>
  
</body>
</html>


et mon css:
@charset "utf-8";
/* CSS Document */

/*body*/
#body {
height:100%;
width:100%;
margin:0;
padding:0;;
text-align:center;
position:absolute;
}

/*conteneur*/
#conteneur {
margin:auto;
background:#000;
height:1000px;
width:1000px;
position:relative;
}

/*entête kanna*/
#entetekanna {
background-image:url(../images/catalogue/kannasurvol.png);
background-position:center;
background-repeat:no-repeat;
width:1000px;
height:84px;
position:relative;
}

/*div kan1*/
#kan1 {
border-color:#CCC;
border-style:outset;
height:195px;
width:350px;
float:left;
position:relative;
top:75px;
margin-left:120px;
}

/*div kan1 interieur*/
#kan1interieur {
border-color:#CCC;
border-style:outset;
height:195px;
width:350px;
float:right;
margin-right:120px;
top:75px;
position:relative;
}

.overlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgba(0,0,0,0.7);
}
.overlay a
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.overlay_container img
{
background: #000000;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.overlay:target { display : table; }


Voilà, je bloque, je ne sais pas trop quoi modifier ni comment, si quelqu'un pouvait me donner une piste... même juste un tout petit indice, ça serait cool....
Merici d'avance!!
Modifié par fvsch (01 Jul 2011 - 12:52)
Je viens de trouver d'où venait le problème. Tout fonctionne donc à merveille sur tous les navigateurs, sauf sous ie, là en cliquant sur les miniatures rien ne se passe.

Autre chose, la box se ferme lorsque l'on clique dessus, or, je souhaiterais y intégrer une croix de fermeture dans le coin supérieur droit, mais je ne sais pas du tout comment faire, ni même si c'est possible en css?
Je continue de chercher mais si quelqu'un a une piste concernant ces deux problèmes, je suis preneuse!!
Modifié par ashkore (30 Jun 2011 - 16:27)
Bonjour,

ashkore a écrit :
après avoir cherché à plusieurs endroits comment faire un effet lightbox sans lightbox, je suis tombée sur ce lien:
http://www.webcssdesign.com/css/ligtbox-css/

qui permet de créer un effet lightbox 100% css.

Mouais, je suis pas fan. C'est une démo sympatoche de l'utilisation de :target en CSS3, mais je n'irais pas utiliser ce système foireux en production.

Ce qui ne marche pas:
- La navigation au clavier (accessibilité).
- La fermeture de l'image centrale avec la touche Echap (convention ergo).

Par ailleurs la structure HTML me semble moins simple et polyvalente que pour une lightbox classique.

ashkore a écrit :
Tout fonctionne donc à merveille sur tous les navigateurs, sauf sous ie, là en cliquant sur les miniatures rien ne se passe.

Quelles versions d'Internet Explorer as-tu testé?
La pseudo-classe :target sur laquelle repose ces styles CSS est supportée dans Internet Explorer à partir de la version 9. Ça ne sera pas compatible IE 7-8.

ashkore a écrit :
mais je ne sais pas du tout comment faire, ni même si c'est possible en css?

Peut-être dans ce cas utiliser un système de «lightbox» (script) qui corresponde d'emblée à tes besoins? Sinon, si tu restes sur ce système de lightbox CSS, tu peux analyser le code pour voir comment il gère l'affichage des grandes images, et modifier pour obtenir ce que tu veux.
Modifié par fvsch (01 Jul 2011 - 13:03)
Sujet clos
Aller à