11 mars 2013
Category:
Javascript
Comments: 0

Une vue à 360°avec le plugin jQuery Threesixty.js

Les vues de produits à 360 degrés, comme vous pouvez les connaître sur les sites automobiles par exemple, peuvent être généré via le plugin pour jQuery nommé Threesixty.js. A l’aide d’attributs HTML5, l’approche est simple pour générer une vue à 360 degrés de vos produits, et ne nécessite que quelques minutes de mise en place.

Threesixty.js: Attributs et galerie d’image Démo / Téléchargement
threesixty-jquery

Ce plugin jQuery ne nécessite pas de grands réglages et paramétrages. Donnez lui le chemin vers votre galerie d’images et il se chargera de créer une vue à 360°. L’exemple de démonstration nécessite 61 images pour générer une pierre taillée en 3D avec rotation. Les images sont nommées selon la norme suivante : gem0.jpg, gem1.jpg,…, gem61.jpg. L’image portant le zéro étant le point de départ.

Code HTML:

Notre div va contenir l’élément que vous souhaitez afficher en 3D. On utilise ensuite les attributs HTML5 data-path et data-count , valeurs importantes pour présenter notre vue 3D

La fonction Javascript suivante est alors utilisée pour générer la pierre taillée :

On peut également ajouter des paramètres à notre vue, dans l’exemple de démonstration on utilise la fonction dragDirection qui va permettre de définir sur quel axe la rotation doit avoir lieu, horizontale ou verticale ( la rotation par défaut sera horizontale). Pour l’heure, ce plugin ne propose pas encore de rotation sur les 2 axes en même temps.

Le mouvement pourra être contrôlé par des liens, de la même manière qu’un slider.

et

Vous pouvez également ajouter les paramètres draggable et useKeys pour ajouter des fonctions à votre vue en 360° et la faire glisser, rester appuyer sur le bouton gauche de votre souris pour continuer la rotation, utilisez les flèches de votre clavier …

Le plugin Threesixty.js est encore jeune, dans une version 0.1.2 à l’heure ou est écrit cet article. Téléchargeable depuis Github et utilisable librement. On notera qu’il est préférable d’installer un moyen de précharger vos images, même si dans l’exemple de démonstration le modèle est simple, le temps de chargement de 61 images ne doit pas être négligé, la rotation sera difficilement immédiate en fonctions de vos projets …



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *