The Wall, un mur d’images « draggable » avec Mootools

4 août 2011

The Wall est plugin Mootools très complet qui permet de mettre en place un mur d’images « draggable ». Il est également possible de l’utiliser en tant que slideshow.

« Draguez » des filles !

The Wall repose sur une méthode de navigation bien particulière : le « drag » ! Cela consiste à faire glisser des éléments HTML pour en faire apparaitre d’autres. Il permet par exemple de générer un mur d’images « draggable » en boucle, très pratique si vous devez afficher une galerie d’images.

Un plugin multi-usage

La qualité première du plugin, c’est sa flexibilité ! Vous retrouverez sur le site officiel plusieurs exemples de Wall (mur basique), Coda (slider de contenu), Inertia (mur avec effet d’inertie), Repositionning (mur avec items indépendants), Mask (mur avec masque), Inverse Direction (mur avec « drag » inversé), Move to coordinates (« drag » avec coordonnées prédéfinies) ou encore Automatic slideshow (slideshow automatique)… Bref, le plugin est complet !

Utilisation du plugin

On définit d’abord la structure HTML : une simple « div » avec un « id ».

<!-- Viewport and Wall -->
<div id="viewport"></div>
<!-- END Viewport and Wall -->

Puis on définit la feuille de style CSS qui va mettre en forme le mur. Vous pouvez bien sûr modifier certaines propriétés, comme les dimensions, pour personnaliser au mieux votre galerie.

/* Minimal Css Required */
#viewport {
    width: 900px;
    height: 450px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: #111111 ;
}
#wall {
    z-index: 1;
}

Et enfin la partie Mootools dans laquelle on définit le nombre total d’items, les dimensions d’un item, le dossier source des images, l’initialisation du wall, etc. Dans cet exemple, notez que les images doivent être numérotées de 1 à n car elles sont appelées dynamiquement avec la variable « counter ».

// Define The Wall
var maxLength = 100; // Max Number images or array length
var counter = 1;
var wall = new Wall("wall", {
    "width": 150,
    "height": 150,
    "rangex": [-100,100],
    "rangey": [-100,100],
    callOnUpdate: function(items) {
        items.each(function(e, i) {
        <!-- This is example code -->
        var a = new Element("img[src=/your/folder/images/"+counter+".jpg]");
        a.inject(e.node).fade("hide").fade("in");
        counterFluid++;
        // Reset counter
        if( counter > maxLength ) counter = 1;
    })
}
});
// Init Wall
wall.initWall();

Et votre mur d’images sera mis en place. Les amateurs de Mootools seront ravis !

Requis : Mootools
Démonstration : http://wall.plasm.it/
Licence : MIT

Commentaires

  • drakkus

    bonjour,
    Je connaissais un peu mootools mais l’exemple nommé « repositioning (basic) » m’a scotché sur mon siège…
    Je vais l’adopter pour mon nouveau site…

  • J’ai tester ce plugin l’exemple avec les couleurs fonctionne bien mais par contre avec les images ce la ne fonctionne pas. voici le code que j’ai appliquer. Le dossier image ce trouver à la rascine avec le fichier html exemple.

    var maxLength = 100; // Max Number images or array length
    var counter = 1;
    var wall = new Wall(« wall », {
    « width »: 150,
    « height »: 150,
    « rangex »: [-100,100],
    « rangey »: [-100,100],
    callOnUpdate: function(items) {
    items.each(function(e, i) {
    var a = new Element(« img[src=/images/ »+counter+ ».jpg] »);
    a.inject(e.node).fade(« hide »).fade(« in »);
    counterFluid++;
    // Reset counter
    if( counter > maxLength ) counter = 1;
    })
    }
    });
    // Init Wall
    wall.initWall();

    • jo

      Bonjour
      tu as une erreur dans ton code javascript counterFluid++; cette variable existe pas essai avec count++;

  • owbarbara

    Y1nA Lately I used to be lacking in $$ and debts were killing me from all sides. That was UNTIL i learned to generate money on the INTERNET. I landed on surveymoneymaker p net, and started filling in surveys for straight cash, and doing so i’ve been far more able to get around financialy!! i’m so glad, I did this.. – 7IEo