Discussion :

[tibotibo69]

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;
}

[danielhagnoul]

Bonsoir.

Lorsque j'ai testé ce code, il y a déjà quelque temps, j'ai trouvé un bug sous IE8, je l'ai signalé à l'auteur du code, mais il n'en a pas tenu compte. Voici ma version :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
$(document).ready(function() {
    var inAnimation = false;
    var z = $('#pictures img').length;
    var image = new Image();
 
    $('#pictures').append('<div id="loader"></div>'); //append the loader div, it overlaps all pictures
 
    $('#pictures img').each(function(i, item) {
 
        $(item).css('z-index', (i+1));
 
        $(image).attr("src", $(item).attr("src")).load();
 
        $("#affiche").append("<p>" + $(image).attr("src") + "</p>");
 
        if ((i+1) == z) {
            $('#loader').fadeOut('slow'); //remove the loader div
        }
     });
 
    function swapFirstLast(isFirst) {
        if(inAnimation) return false;
        else inAnimation = true;
 
        var processZindex, direction, newZindex, inDeCrease;
 
        if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }
        else { processZindex = 1; direction = '+'; newZindex = z; inDeCrease = -1; }
 
        $('#pictures img').each(function(i, item) {
            if ($(item).css('z-index') == processZindex) {
 
                $(item).animate({'top': direction + $(item).height()}, 'slow', function() { 
                    $(item).css('z-index', newZindex).animate({'top': '0'}, 'slow', function() {
                        inAnimation = false;
                    });
                });
 
            } else {
 
                $(item).animate({'top': '0'}, 'slow', function() {
                    //make sure to wait swapping the z-index when image is above/under the gallery
                    //in/decrease the z-index by one
                    $(item).css('z-index', parseInt($(item).css('z-index')) + inDeCrease);
                });
            }
        });
 
        return false; //don't follow the clicked link
    }
 
    $('#next a').click(function() {
        return swapFirstLast(true); //swap first image to last position
    });
 
    $('#prev a').click(function() {
        return swapFirstLast(false); //swap last image to first position
    });
});

[tibotibo69]

Merci pour ton script, je l'essaierai demain.

Les tutos qui sont dans "le mag développez" ne sont-ils pas testés et vérifiés avant d'être publiés ?!

[danielhagnoul]

Bonsoir.

Pour un tutoriel-traduction, on reproduit fidèlement le code et le texte, aucune modification n'est permise, c'est pourquoi il est parfois utile de consulter les commentaires.

[tibotibo69]

Merci pour ton script, il marche nikel.