Un slider d’images à 360° avec jQuery

slide360-Article Dernière mise à jour le 1 septembre 2013 à 03h23

Threesixty-slider est un plugin JavaScript développé par un webdesigner londonien du nom de Jassal Gaurav. Allié à la puissance de la librairie jQuery, il vous permet de réaliser très simplement un slider d’images avec rotation à 360 degrés sans la moindre connaissance, ou presque, de JavaScript. Ce plugin est entièrement personnalisable et comprend de nombreuses fonctionnalités intéressantes que nous allons passer en revue tout au long de cet article.

Voir la Démo

Petit tour d’horizon

Qu’est-ce qu’un slider 360° ?

On a l’habitude de voir des sliders où défile dans une boite à largeur fixe une image de type panoramique pouvant atteindre les 360°. La prise de vue s’effectue en grande majorité depuis le centre de la scène.

Dans notre cas, on utilisera le plugin Threesixty-slider pour un rendu différent où le principe est inversé.

En effet la prise de vue est cette fois-ci dynamique et l’élément scénarisé sera vu sous tous ses angles à la manière du regard que porte la Lune (en rotation) sur la Terre.

Principe de fonctionnement

Le plugin lit plusieurs images dont l’angle de prise de vue diffère légèrement d’une image à l’autre. Ces images sont affichées très brièvement les unes à la suite des autres sous le contrôle de votre curseur, ce qui génère une animation plus ou moins fluide selon la quantité d’images qui composent votre scène. On a alors le contrôle total sur un environnement en 3 dimensions.

Pourquoi utiliser ce type de slider ?

On y trouve une utilité dans les sites e-commerces (automobile, textile, high tech…).

On peut imaginer par exemple une boutique web de luxe :

À travers un univers sobre et épuré, les objets mis en vente peuvent être visualisés de manière interactive. Chacun d’eux est composé d’une cinquantaine d’images (50 prises de vues différentes), ces dernières s’afficheront en fonction de la position d’un marqueur situé sur une scrollbar horizontale que l’on peut personnaliser.

Oui c’est possible, car cette fonctionnalité est gérée par noUiSlider.

De plus, ce plugin est supporté par tous les navigateurs web y compris IE 6 !
Image des différents navigateurs web

Mettre en place son slider 360°

Voir l’exemple

Ce plugin comprend 3 contrôles différents :

  • Contrôle avec le curseur
  • Contrôle avec des boutons
  • Contrôle avec une scrollbar

Pour chacune de ces méthodes de contrôle, nous allons regarder ensemble comment l’implémenter et la paramétrer.

Préparation de Threesixty-slider

Pour commencer, il nous faut télécharger les fichiers nécessaires au bon fonctionnement du plugin. Vous avez la possibilité de télécharger un pack comprenant :

  • Les pages d’exemples, des fichiers spécifiques à certaines fonctionnalités, des fichiers d’aides, …
  • Télécharger individuellement les fichiers via GitHub pour ne prendre que l’essentiel.
Téléchargement direct Téléchargement GitHub
 Téléchargement  Téléchargement

 

Appels des fichiers JavaScript et CSS

Dans notre page, nous commençons par faire nos différents appels :

CSS : 360.css

JavaScript : jQuery.js , threesixty.min.js

 

La structure HTML

Abordons maintenant la structure HTML de notre slider 360 qui se décompose de la manière suivante:

  • Un bloc qui englobe tout, alimenté par deux classes.
  • Un bloc “spinner” qui correspond au loader numérique du slider.
  • Un bloc de type liste (ol) où chaque li sera alimenté par une image.

 

Appel et paramétrage du JavaScript

Nous rentrons maintenant dans le vif du sujet.

Ici, on exécute la fonction init() au chargement de la page. On déclare une ou plusieurs variables, où chacune d’elles représente un slider dont les paramètres sont différents.

On retrouve ensuite la fonction init() qui contient notre variable qui est alimentée de cette manière :

  • On utilise comme sélecteur l’une de nos classes contenues dans la div englobante de notre structure HTML.
  • On lance la fonction ThreeSixty() sur ce sélecteur. La fonction est agrémentée de plusieurs paramètres qui doivent obligatoirement êtres configurés.

Non non, ce n’est pas plus compliqué que ça !

Comprendre les paramètres

Même si leurs noms restent assez explicite, voici quelques précisions sur les paramètres :

Pour voir la liste complète, rendez-vous sur la documentation officielle.

Code assemblé

Et voici notre code assemblé et commenté :

 

Un contrôleur sous forme de scrollbar

Voir l’exemple

Threesixty-slider s’utilise également avec le plugin noUiSlider, et ça tombe bien on en a besoin pour la scrollbar !

Après l’avoir téléchargé, on le rajoute à notre page en faisant bien attention à l’ordre d’appel :

On rajoute dans notre structure HTML une div contenant la scrollbar :

Dans l’appel de notre fonction ThreeSixty() on passe à false deux paramètres :

On déclare ensuite une autre fonction noUiSlider() en prenant comme sélecteur la div qui contient la scrollbar :

On prendra soin à modifier le nombre d’images dans .round() afin qu’il coïncident bien avec le nombre d’images spécifié dans le paramètre totalFrames de la fonction Threesixty(). La variable “product2″ correspond au slider de la voiture, elle lance la fonction gotoAndPlay(). Vous ferez donc particulièrement attention à déclarer le bon nom de variable, sans ça la scrollbar ne fonctionnera pas.

Rajoutez maintenant le code CSS suivant à votre feuille de style :

Modifiez ce CSS à votre convenance ! That’s all !
Voir l’exemple

Modifier l’apparence des boutons de contrôle

Vous avez également la possibilité de customiser vos boutons de contrôle, et encore une fois le développeur du plugin nous a mâché le travail !
Pour cela, il n’y a qu’à ajouter dans notre structure HTML une div contenant les boutons de contrôle de cette façon :

Dans l’appel de notre fonction ThreeSixty() on passe à false un paramètre :

On insère dans la fonction init() plusieurs méthodes .bind() rattachées à des sélecteurs différents pour des actions différentes (ces sélecteurs représentent nos boutons) .

La variable “product3″ correspond au slider des chaussures, elle lance les fonctions associées aux boutons : previous(), next(), play() et stop(). Vous ferez donc particulièrement attention à déclarer le bon nom de variable, sans ça les boutons ne marcheront pas.

Vous n’avez plus qu’à styliser avec du CSS vos boutons en faisant appel à leur classe respective.

Conclusion

C’est ainsi que se finit ce petit tutoriel qui je l’espère vous poussera à réaliser ce type de slider. Notez toutefois qu’il s’agit là d’images décoratives prises par un professionnel, et qu’il est très difficile d’avoir un rendu d’image aussi précis.

Pour réussir des clichés il faudra prendre en compte deux contraintes. Faites très attention à la hauteur de prise de vue :

  • Dans le cas où l’appareil photographique est positionné sur une surface lisse au même niveau que l’objet vous n’avez qu’une contrainte à prendre en compte. Vous devrez gérer de manière précise l’angle de chaque prise.
    Par exemple vous décidez de prendre 52 clichés, vous divisez simplement 360/52, et vous obtiendrez la valeur de l’angle (~7) qu’il faudra ajouter après chaque cliché.
  • Dans le cas d’une prise de vue arienne, il faudra gérer deux contraintes. La hauteur de l’appareil photographique et la rotation de ce dernier de la même manière qu’avec une prise de vue au sol.

Même si la tâche se veut difficile sur la partie photographie, la partie intégration quant-à elle reste raisonnablement accessible à tous ! Ces sliders rajoutent une petite touche de dynamisme visuellement agréable, une fonctionnalité intuitive qui ravira vos visiteurs et prospects.

Bon courage !

Un slider d'images à 360° avec jQuery, 4.8 out of 5 based on 4 ratings

Commentaires

#1
Yassin Graph

merci pour le tuto

#2
Jeux2Tir

Bonjour,
Je planche en ce moment sur un nouveau projet et ces sliders à 360° pourront m’être bien tuile. Bon niveau code et tout ça c’est un peu du chinois pour moi, mais j’ai un ami qui va pouvoir bidouiller ça pour moi, donc ça le fait :)

#3
PJRQT

Que du plaisir de voir cette qualité de travail avec un site de très bonne facture.
Merci
;-)

Réagissez à cet article

Données obligatoires