benji1801 Posted March 24, 2013 Share Posted March 24, 2013 (edited) 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 Edited May 26, 2014 by benji1801 5 Quote Link to comment Share on other sites More sharing options...
desspil Posted March 25, 2013 Share Posted March 25, 2013 Merci benji, je testerais ! Quote Link to comment Share on other sites More sharing options...
nico.h Posted May 6, 2014 Share Posted May 6, 2014 Super merci tu pourrais juste réuploadé le fichier stp ;) Quote Link to comment Share on other sites More sharing options...
benji1801 Posted May 26, 2014 Author Share Posted May 26, 2014 Je viens de mettre à jour le lien pour le fichier compressé, voir premier post. Quote Link to comment Share on other sites More sharing options...
fritzerboy Posted May 22, 2016 Share Posted May 22, 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.