benji1801 Posté(e) 26 mai 2014 Share Posté(e) 26 mai 2014 Salut,Voici un petit tutoriel si vous souhaitez partager une photosphère en dehors de Google+ et Google Maps, en particulier sur votre page perso.J'ai réalisé ceci sur ma page perso Free, vous pouvez tester : lien.Pour cela, il faut utiliser le script réalisé par kennydude, dont le repository est sur Github. Il vous suffit de suivre les étapes suivantes :1) Télécharger le script : photosphere.rar2) Décompresser l'archive.3) Dans le dossier décompressé se trouvent les fichiers nécessaires au script, ainsi qu'un exemple.L'image exemple est le fichier test.jpg.Le fichier html important est sphere.html, c'est ce fichier qu'il faut configurer pour ajouter d'autres images et mettre en forme votre page.Ouvrez donc le fichier sphere.html avec votre éditeur de texte favori (bloc-notes par exemple B) ).Voici ce qu'on obtient :En rouge, vous voyez ce qui concerne l'image test.jpg :___________________________________________________________________<!DOCTYPE html><html lang="en"><head><title>photosphere</title></head><body><a href="test.jpg" id="test">Image test</a><br/><div id="sphere" style="width: 100%; height: 600px;"></div><script src="extern/three.min.js"></script><script type="text/javascript" src="lib/sphere.js"></script><script type="text/javascript">document.getElementById("test").onclick = function(){sphere = new Photosphere(this.getAttribute("href"));sphere.loadPhotosphere(document.getElementById("sphere"));return false;};</script></body></html>___________________________________________________________________4) Pour ajouter une photosphère :Supposons que l'image à ajouter se nomme montagne.jpg.Il faut alors ajouter les lignes suivantes dans le code, en dessous de son équivalent pour l'image test.jpg.___________________________________________________________________<a href="montagne.jpg" id="montagne">Montagne</a><br/>___________________________________________________________________Ensuite, dans les dernières balises script du code présenté avant, ajouter les lignes suivantes :___________________________________________________________________document.getElementById("montagne").onclick = function(){sphere = new Photosphere(this.getAttribute("href"));sphere.loadPhotosphere(document.getElementById("sphere"));return false;};___________________________________________________________________En fait, vous pouvez mettre ce que vous voulez à la place de l'id montagne, mais il faut que ce soit le même que celui inscrit dans la fonction document.getElementById.Ainsi, le code final est :___________________________________________________________________<!DOCTYPE html><html lang="en"><head><title>photosphere</title></head><body><a href="test.jpg" id="test">Image test</a><br/><a href="montagne.jpg" id="montagne">Montagne</a><br/><div id="sphere" style="width: 100%; height: 600px;"></div><script src="extern/three.min.js"></script><script type="text/javascript" src="lib/sphere.js"></script><script type="text/javascript">document.getElementById("test").onclick = function(){sphere = new Photosphere(this.getAttribute("href"));sphere.loadPhotosphere(document.getElementById("sphere"));return false;};document.getElementById("montagne").onclick = function(){sphere = new Photosphere(this.getAttribute("href"));sphere.loadPhotosphere(document.getElementById("sphere"));return false;};</script></body></html>___________________________________________________________________5) Enregistrez, et il ne reste plus qu'à uploader l'ensemble des fichiers sur votre serveur.6) Ouvrir la page sphere.html depuis votre navigateur :)Voilà, si vous avez la moindre question, n'hésitez pas à la poser, j'essaierai de vous répondre :P Lien vers le commentaire Partager sur d’autres sites More sharing options...
Recommended Posts
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.