Aller au contenu

[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

Modifié par benji1801
  • Like 5
Lien vers le commentaire
Partager sur d’autres sites

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

Rejoignez la conversation

Vous pouvez poster maintenant et vous enregistrez plus tard. Si vous avez un compte, connectez-vous maintenant pour poster.

Invité
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
×
  • Créer...