Comment coder une image produit à 360°

Présenter une image à 360° de son produit sur son site pour en voir ses moindres détails, c’est vraiment la classe ! Et c’est surtout plus vendeur.

Mais comment intégrer cette image à 360° ?

Et bien, j’ai découvert pendant ma veille technologique une formidable librairie JavaScript qui nous facilite grandement la vie. Alors je vous ai préparé un petit article, et un test DIY avec ce que j’avais sous la main : ma vapote, un home studio fait avec un assiette plastique et une feuille A4 et mon smartphone 😊.

Les photos

Dans un premier temps, il nous faut bien sûr des photos (top qualité) du produit. On va avoir besoin de 8 à 200 images sous tous les angles (360°). Elles seront toutes optimisées en poids, tailles, renommées avec un nom presque à l’identique et nous les placerons dans un même dossier .
Voici un exemple de renommage : produit-1.jpg, produit-2.jpg,…

Évidement, plus on aura de photo, mieux l’effet 360° sera satisfaisant. Dans mon test, j’ai fait 8 photos, et ça donne déjà pas mal !

L'intégration dans le code

Deuxièmement, passons à l’intégration pur et dur dans le code. Sur le GitHub JS Cloudimage 360 View, l’intégration se fait en 2 étapes.

En premier, il suffit d’ajouter le lien CDN de la bibliothèque JavaScript JS CloudImage 360 view, avant , après tout contenu (Pour éviter que le script ralentisse le chargement de page, contenu bloquant) suivant :

<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.4.min.js"></script>

Ensuite, créez un bloc div pour votre produit avec la class « cloudimage-360 », le chemin du dossier qui contient les images du produit, le nom du fichier et le nombre d’images comme ci-dessous :

<div
   class="cloudimage-360"
   data-folder="../images/"
   data-filename="produit-{index}.jpg"
   data-amount="8"
></div>

Le « data-filename » contient le nom de l’image suivi de « -{index} » pour remplacer le numéro du nom de l’image qui sera incrémenté par le script JavaScript.

Et voilà, vous obtenez votre produit à 360° !

Visitez le lien Github pour étudier toutes les options disponibles de l’effet, mais cette petite demo vous donne déjà un aperçu des possibilités de cette bibliothèque Javascript puissante.

 

Bien évidement, vous pouvez faire appel à mes services 😊, c’est encore plus simple.

Jérémy

Développeur web Freelance

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.