Jump to content

[TUTO] Partager une photosphère sur votre page perso !


Recommended Posts

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.rar

2) 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 by benji1801
  • Like 5
Link to comment
Share on other sites

  • 1 year later...
  • 3 weeks later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...