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