Ascensor, prenez l’ascenseur avec jQuery

5 septembre 2011
10 671 vues

Ascensor est un plugin jQuery qui permet d’adapter le contenu d’une page web selon un système d’étages, comme dans un ascenseur… un ascenseur « fullscreen » ! vous pouvez vous déplacer verticalement, horizontalement et même en diagonale. Original, non ?

« Vous montez à quel étage ? »

Ascensor fonctionne un peu comme un slideshow « fullscreen ». A la différence que le déplacement des diapositives s’effectue dans n’importe quel sens. Il nécessite l’utilisation du plugin jQuery ScrollTo pour fonctionner ce qui permet un mouvement très fluide. La navigation entre les diapositives se fait via des boutons « prev » et « next » ou par clavier. Il est également possible de générer une mini-map cliquable schématisant la position des différents étages.

Installation du plugin Ascensor

On commence par inclure le framework jQuery, le plugin ScrollTo et le plugin Ascensor.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>

Puis on définit la structure HTML pour construire une « maison » avec le nombre d’étages et un id CSS à mettre sur la « div » englobante. Ici on ne définit pas le sens de déplacement mais simplement le nombre et l’ordre des étages.

<div id="house">
        <div>
                <!-- Etage1 -->
                <div id="contenu_etage1"></div>
        </div>
        <div>
                <!-- Etage2 -->     
                <div id="contenu_etage2"></div>
        </div>
        <div>
                <!-- Etage3 -->
                <div id="contenu_etage3"></div>
        </div>  
        <div>
                <!-- Etage4 -->
                <div id="contenu_etage4"></div>
        </div>
        <div>
                <!-- Etage5 -->
                <div id="contenu_etage5"></div>
        </div>
</div>

Puis on fait appel à la fonction jQuery du plugin sur l’id de notre « maison » comme ceci :

$('#house').ascensor();

Niveau CSS, il faut penser à masquer la barre de défilement.

body {overflow: hidden;}

Les paramètres

Il existe tout un tas d’options à configurer. Cependant on peut regretter l’absence d’un paramètre définissant la durée entre deux étages, comme dans n’importe quel slider jQuery. Voici quelques options :

  • AscensorName : variable qui définit l’id (auqel sera ajouter automatiquement un nombre qui s’auto-incrémente) et la classe CSS commune pour chaque étage
  • WindowsOn : entier qui définit le numéro de l’étage que vous voulez afficher au chargement de la page (0 pour le premier, 1 pour le deuxième, et ainsi de suite)
  • CSSstyles : booléen pour utiliser le CSS par défaut (« true ») ou sa propre feuille de style (« false »)

La mini-map

Deux options sont particulièrement intéressantes puisqu’elles permettent de générer une mini-map. Pour cela, on définit la taille de la « maison » avec le nombre de lignes et de colonnes (AscensorMap). Ensuite, on peut définir l’emplacement de chaque étage avec une série de coordonnées (ContentCoord). Ainsi, on peut définir le parcours exact de l’ascenseur.

$('#content').ascensor({
        AscensorMap: '4|3',
                //define the size of a map
        ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'
                //place stage one by one, indicating they positionx|positiony
});

J’ai testé l’outil sur plusieurs navigateurs : il fonctionne sur Firefox 4.0, Chrome 12.0, Opera 11.50 et Internet Explorer 7-8-9. Ascensor est un donc plugin jQuery qui peut s’avérer pratique, par exemple pour organiser un portfolio. A chacun d’en trouver l’utilité.

Requis : jQuery, ScrollTo
Démonstration : http://www.kirkas.ch/ascensor/
Licence : libre

Commentaires

  • http://oussamabenkhiroun.com/blog/ Oussamabk

    Intéressant article comme d’habitude.

  • http://www.novius-labs.com Gilles Felix

    Le concept est intéressant. Il manque juste des infos bulles sur le « menu » en bas à droite pour pouvoir naviguer directement vers la bonne page.

  • http://blog.escarworld.com rivsc

    Hello, je découvre megaptery.com sympa ! Sinon ce plugin est terrible pour faire des diapos !

  • Anonyme

    Plugin sympa, mais manque quand même un peu d’info :(
    du style : comment faire un lien direct d’une page à une autre (en mettant à jour le menu).
    Quelqu’un a une idée ?

    • koli

      Pour cela un lien qui pointe sur la bonne ancre si j’ai bien compris ta question
      Acces a la page 3

  • Marine

    Bonjour,
    J’ai essayé le plugin, mais cela ne fonctionne pas est-ce normal ? Je pense avoir relier tous les bon fichiers pourtant.

    • http://www.megaptery.com/ Pierre

      Non, ce n’est pas normal ;-)
      Vérifie les erreurs JS dans la console navigateur.