benji1801 Posté(e) 24 mars 2013 Share Posté(e) 24 mars 2013 (modifié) 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 Modifié 26 mai 2014 par benji1801 5 Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
desspil Posté(e) 25 mars 2013 Share Posté(e) 25 mars 2013 Merci benji, je testerais ! Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
nico.h Posté(e) 6 mai 2014 Share Posté(e) 6 mai 2014 Super merci tu pourrais juste réuploadé le fichier stp ;) Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
benji1801 Posté(e) 26 mai 2014 Auteur Share Posté(e) 26 mai 2014 Je viens de mettre à jour le lien pour le fichier compressé, voir premier post. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
fritzerboy Posté(e) 22 mai 2016 Share Posté(e) 22 mai 2016 Bonjour et merci pour ce script. Je me demandais s'il était possible de lancer la photoshepre à l'ouverture de la page sans devoir cliquer sur le lien ? merci encore, fv Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Recommended Posts
Rejoignez la conversation
Vous pouvez poster maintenant et vous enregistrez plus tard. Si vous avez un compte, connectez-vous maintenant pour poster.