Discussion :

[Bovino]

Bonjour,

Je vous propose une traduction de l'article anglophone Create a unique Gallery by using z-index and jQuery

Ce tutoriel va vous montrer comment créer une galerie d'images en utilisant la propriété CSS z-index et jQuery

Pour toutes questions/suggestions, vous pouvez les faire à la suite de ce message.

Bonne lecture

[danielhagnoul]

Bonsoir Bovino.

Il y a une amélioration, voir : http://thisblog.usejquery.com/2009/0...preloader/#toc

[Kerod]

On est au courant pour l'amélioration mais on va dans l'ordre de parution.

Cela ne sert à rien de traduire un article si la base ne l'est pas

Aussi pour infos ce n'est pas une amélioration du code que l'on propose mais plutôt un nouveau tutoriel qui reprend juste la base pour ajouter de nouveaux éléments. A aucun moment on modifie le code de base

[danielhagnoul]

Bonsoir.

Bien entendu il faut toujours commencer par le début.

Je voulais simplement signaler qu'il y avait une suite intéressante, très peu différente de la première version et que l'on aurait pu imaginer les associer dans la traduction.

Il se trouve que cette suite provoque un bug sous IE8, je n'ai pas testé les autres versions d'IE, ni d'autres navigateurs que F3.

Voici ma correction du fichier demo.js :

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
 
$(document).ready(function() { //perform actions when DOM is ready
    //var z = 0; //for setting the initial z-index's
    var inAnimation = false; //flag for testing if we are in a animation
    //var imgLoaded = 0; //for checking if all images are loaded
 
    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();
 
        if ((i+1) == z) {
            $('#loader').fadeOut('slow');
        }
     });
 
  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image
 
    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
 
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action
 
    $('#pictures img').each(function() { //process each image
      if($(this).css('z-index') == processZindex) { //if its the image we need to process
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
        });
      }
    });
 
    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
  });
});