Bonjour,

J'ai suivi le tuto pour faire une minigalerie photo en utilisant jquery et le z-index qui se trouve dans le mag developpez de juin-juillet 2009 dispo ici

Cependant j'ai un soucis pour afficher un overlay tant que toutes les images ne sont pas chargées, en fait il reste afficher même après le chargement des images.

Voici mon code:
fichier html :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <div  id="gallery">
    <div id="pictures">
      <img src="images/triskell.png" alt="" />
      <img src="images/triskell2.png" alt="" />
      <img src="images/triskell3.png" alt="" />
      <img src="images/triskell4.png" alt="" />
    </div>
    <span id="prev">
      <a href="#previous">« Image précédente</a>
    </span>
      |
    <span id="next">
      <a href="#next">Image suivante »</a>
    </span>
  </div>
script javascript: (je n'ai mis que la fonction concernée)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#pictures').append('<div id="loader"></div>');
//ajoute la div loader, par-dessus les images
 
$('#pictures img').each(function() { //attribue les z-index de départ
        z++; //à la fin, le plus haut z-index sera dans cette variable
        $(this).css('z-index', z); //attribue le zindex à la balise <img>
            $(new Image()).attr('src', $(this).attr('src')).load(function() { //crée un nouvel objet image et appelle une fonction quand elle est chargée
                imgLoaded++; //une image de plus est chargée
                if(imgLoaded == z) { //toutes les images sont-elles chargées ?
                    $('#loader').fadeOut('slow'); //si c'est le cas, le calque disparait
                }
            });
});
et le css :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
#loader {
position: absolute;
top: 0;
left:0;
height: 450px;
width: 100%;
background: url(../images/ajaxloader.gif) white no-repeat center center;
opacity: 0.5;
z-index: 9999;
}