Afficher des images/vidéos 360 sur WordPress de façon gratuite avec cette librairie Open Source

Remarque : Pannellum permet aussi la création de visite virtuelle en assemblant plusieurs images 360°.

Pannellum c’est quoi ?

Pannellum est une bibliothèque JavaScript open source pour créer des expériences interactives de visualisation panoramique et à 360 degrés. Elle permet aux développeurs d’intégrer facilement des images et des médias panoramiques dans des sites web et des applications, offrant aux utilisateurs la possibilité de naviguer et d’explorer ces contenus de manière immersive.

Source : ChatGPT

Étapes pour utiliser Pannellum.js dans WordPress

1. Installer l’extension WordPress HTTP Headers.
2. Dans les paramètres de l’extension HTTP Headers > Access Control > Activer CORS Access-Control-Allow-Origin : Origin.
   • Ajouter l’URL “https://cdn.pannellum.org”.
3. Transférer les médias 360° au format JPEG equirectangulaire dans la médiathèque WordPress.
4. Utiliser les codes Iframe ou les blocs HTML : https://pannellum.org/documentation/examples/simple-example.
5. Remplacer les URLs par les URLs de vos images transférées sur WordPress.
6. Dans un article ou une page copier/coller l’Iframe ou le code HTML dans un bloc Custom HTML.

Marzipano Tools

1. Réaliser votre visite virtuelle 360° sur l’outil https://www.marzipano.net/tool
2. Une fois terminée exporter le code source en cliquant sur Export, vous aller alors télécharger une archive zip contenant votre visite virtuelle au format HTML/CSS/JS.
3. Héberger le code source téléchargé sur Mazipano Tools sur votre hébergement WordPress via FTP ou via une extension du type WP File Manager
   1. Vous pouvez soit envoyer l’archive ZIP et l’extraire sur le serveur, ou d’abord extraire les fichiers de l’archives et les envoyer sur votre serveur.
4. Intégrer dans une page ou un article avec une balise HTML Iframe.
   1. Exemple : <iframe src=”https://**votre_nom_de_domaine.fr/nom_du_dossier_export_360/app-files/**” height=”800px” width=”100%”></iframe>
   2. Voir un exemple : https://dev.westindiespixels.fr/place-de-la-victoire-visite-virtuelle-360-2023-pointe-a-pitre-guadeloupe

Autres alternatives gratuites

• Panolens.js
  • https://pchen66.github.io/Panolens
• Photo Sphere Viewer
  • https://photo-sphere-viewer.js.org
• Marzipano Tools
  • Une fois votre export en HTML/CSS/JS réalisé. Héberger le code source sur votre hébergement WordPress, puis intégrer dans une page ou un article avec une balise HTML Iframe.
  • https://www.marzipano.net
• Une alternative plus facile a utilisé, Kuula
  • https://kuula.co/page/pricing