[Article] Une galerie d'images utilisant la propriété CSS z-index et jQuery

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

Bonsoir Bovino.

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

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 :aie:

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 :aie:

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:

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