salut a toutes les personnes qui essayes de comprendre mon problème :p
en faite je fais une lightbox et je ne trouve pas le moyen d'afficher tous les composants de ma lightbox. en clair je ne peux afficher que un seul des éléments de ma lightbox.

je vous montre mon code :

partie html :

<a href="javascript:AfficheCache('back <!--lieu ou je mes les id des objets à faire aparaitre-->')" id="l1"><img class="image2" src="images/mpv.png" width="178px"></a>
<div id="filtre">&nbsp</div>

<div id="back">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum est orci, ut interdum orci facilisis sed. Pellentesque ligula sem, eleifend id fringilla id, placerat at ligula. Phasellus eu risus nec justo fringilla ultrices quis vitae justo. Maecenas rutrum gravida est, ac tempus orci tempor eu. Fusce ut risus id metus consequat consectetur quis quis tortor. Praesent imperdiet quis sapien eleifend vulputate. Donec imperdiet dui non vehicula commodo. In commodo erat quis dui consectetur molestie. Quisque nibh sapien, volutpat vel nulla eget, semper tincidunt mi. Nullam iaculis egestas accumsan. Suspendisse posuere velit non nisi vehicula, euismod auctor felis sollicitudin. Donec orci orci, tincidunt porta metus a, lacinia sollicitudin nulla. Aenean lacinia elit at lacus commodo suscipit. Nam lacinia fermentum lorem nec dapibus. Praesent ligula lectus, elementum et molestie ac, mattis ut ante. Sed consequat quam nisl, vitae porta tortor semper eu.
</div>

<a href="# id="hide" class="bye">×</a>

partie css :

#filtre {
height:394%;
width:100%;
z-index:55;
position:absolute;
opacity:0.4;
top:0;
background-color:gray;
display:none;
}

#back {
text-align: center;
background: white;
position:fixed;
left: 13%;
top: 5%;
width: 980px;
height: 525px;
overflow:auto;
border-radius:10px;
padding:25px;
z-index:56;
color:rgb(133, 133, 133);
display:none;
}

#bye {
color:black;
position:fixed;
z-index:57;
top:0;
text-decoration:none;
top:5%;
left:1173px;
font-size:28px;
transition:all 0.5s;
display:none;
}
#bye:hover {
color:black;
position:fixed;
z-index:57;
top:0;
text-decoration:none;
top:5%;
left:1167px;
font-size:48px;
transition:all 0.5s;

}

partie js :

var AfficheCache = function AfficheCache(Id)
  {
    if (document.getElementById && document.getElementById(Id) != null)
    {
        if(document.getElementById(Id).style.display=='none') document.getElementById(Id).style.display='block';
        else document.getElementById(Id).style.display='none';
    }
  }

quand il sagit d'afficher qu'un élément sa marche parfaitement mais quand je rentre plusieurs id dans le lien sa ne marche plus.

desolé pour ma bétise de l'erreur si elle est simple mais je debute en js.
pour l'instant le probleme ne se pose que pour l'ouverture de la lightbox au clique du lien comme vous l'avez compris, d'ailleur je me repete un peu mais je veux que vous compreniez facilement

1 réponse


dorian37271
Auteur
Réponse acceptée

ses bon je vient de resoudre mon probleme, je viens de changer juste mon code html. j'ai reflechit et une idée m'est venu et elle a marché

partie js :

var AfficheCache = function AfficheCache(Id)
  {
    if (document.getElementById && document.getElementById(Id) != null)
    {
        if(document.getElementById(Id).style.display=='none') document.getElementById(Id).style.display='block';
        else document.getElementById(Id).style.display='none';
    }
  }

  var Cache = function Cache(Id)
  {
    if (document.getElementById && document.getElementById(Id) != null)
    {
        if(document.getElementById(Id).style.display=='block') document.getElementById(Id).style.display='none';
        else document.getElementById(Id).style.display='block';
    }
  }

partie html :

<a href="javascript:AfficheCache('back');javascript:AfficheCache('filtre');javascript:AfficheCache('bye');" id="l1"><img class="image2" src="images/mpv.png" width="178px"></a>

<div id="filtre">&nbsp</div>

<div id="back">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum est orci, ut interdum orci facilisis sed. Pellentesque ligula sem, eleifend id fringilla id, placerat at ligula. Phasellus eu risus nec justo fringilla ultrices quis vitae justo. Maecenas rutrum gravida est, ac tempus orci tempor eu. Fusce ut risus id metus consequat consectetur quis quis tortor. Praesent imperdiet quis sapien eleifend vulputate. Donec imperdiet dui non vehicula commodo. In commodo erat quis dui consectetur molestie. Quisque nibh sapien, volutpat vel nulla eget, semper tincidunt mi. Nullam iaculis egestas accumsan. Suspendisse posuere velit non nisi vehicula, euismod auctor felis sollicitudin. Donec orci orci, tincidunt porta metus a, lacinia sollicitudin nulla. Aenean lacinia elit at lacus commodo suscipit. Nam lacinia fermentum lorem nec dapibus. Praesent ligula lectus, elementum et molestie ac, mattis ut ante. Sed consequat quam nisl, vitae porta tortor semper eu.
</div>
<a href="javascript:Cache('back');javascript:Cache('filtre');javascript:Cache('bye');" id="bye">×</a>

<script type="text/javascript" src="javascript_lightbox.js"></script>

partie css :

::-webkit-scrollbar { 
 width: 8px; /*largeur de la scrollbar verticale*/
  height: 8px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}
::-webkit-scrollbar-track { 
  background-color: #D8D8D8; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 ;}
  /*moz*/
  ::-moz-scrollbar { 
  width: 7px; /*largeur de la scrollbar verticale*/
  height: 7px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}
::-moz-scrollbar-track { 
  background-color: #D8D8D8; /*couleur du fond de la scrollbar*/}
::-moz-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 ;}
  /*moz*/
  /*o*/
::-o-scrollbar { 
  width: 7px; /*largeur de la scrollbar verticale*/
  height: 7px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}
::-o-scrollbar-track { 
  background-color: #D8D8D8; /*couleur du fond de la scrollbar*/}
::-o-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 ;}
  /*o*/

  /*ms*/
::-ms-scrollbar { 
  width: 7px; /*largeur de la scrollbar verticale*/
  height: 7px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}
::-ms-scrollbar-track { 
  background-color: #D8D8D8; /*couleur du fond de la scrollbar*/}
::-ms-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 ;}

/*ms*/
 ::scrollbar { 
  width: 7px; /*largeur de la scrollbar verticale*/
  height: 7px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}
::scrollbar-track { 
  background-color: #D8D8D8; /*couleur du fond de la scrollbar*/}
::scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 ;}

::selection {
color:white;
background-color:red;

}
::-moz-selection {
color:white;
background-color:red;

}
::-o-selection {
color:white;
background-color:red;

}
::-ms-selection {
color:white;
background-color:red;

}
::-webkit-selection {
color:white;
background-color:red;

}

#filtre {
height:394%;
width:100%;
z-index:55;
position:absolute;
opacity:0.4;
top:0;
background-color:gray;
display:none;
}

#back {
text-align: center;
background: white;
position:fixed;
left: 13%;
top: 5%;
width: 980px;
height: 525px;
overflow:auto;
border-radius:10px;
padding:25px;
z-index:56;
color:rgb(133, 133, 133);
display:none;
}

#bye {
color:black;
position:fixed;
z-index:57;
top:0;
text-decoration:none;
top:5%;
left:1173px;
font-size:28px;
transition:all 0.5s;
display:none;
}
#bye:hover {
color:black;
position:fixed;
z-index:57;
top:0;
text-decoration:none;
top:5%;
left:1167px;
font-size:48px;
transition:all 0.5s;

}