VIEWER PANORAMAS 360
mp11374
-
9 déc. 2012 à 18:35
mp11374 Messages postés 6 Date d'inscription mercredi 9 décembre 2009 Statut Membre Dernière intervention 18 novembre 2013 - 16 sept. 2013 à 10:32
mp11374 Messages postés 6 Date d'inscription mercredi 9 décembre 2009 Statut Membre Dernière intervention 18 novembre 2013 - 16 sept. 2013 à 10:32
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/54787-viewer-panoramas-360
https://codes-sources.commentcamarche.net/source/54787-viewer-panoramas-360
7 janv. 2013 à 18:25
Ce serait bien de finaliser le binz en faisant un zip propre afin de s'y retrouver et si possible programmer ces foutues vitesses.
Ce qui me permettrai de virer ce que j'ai posté (un vrai b...l je l'avoue !)
Bien à vous
mp11374
16 sept. 2013 à 10:32
<dommage que la
soit à 550 pixels de hauteur pour des images à 530, donc un calcul à effectuer par la machine du visiteur, dommage qu'à la racine de ce "Site" l'index soit "down", donc nous tombons directement à lister le répertoire du serveur, etc. etc., bref,
très léger !>
Pour relancer le binz ou je n'ai toujours pas de réponses mis à part des critiques certes constructives, la taille de 530 correspond à l'image, celle de 550 à l'image + un fond noir pour faire apparaitre les soit disantes abomifreuses flêches qui me conviennent parfaitement contrairement à la solution proposée (beurk !)
Pour les différentes vitesses, il va falloir que je me trouve un bouquin pour me guider.....
yvanoph, tu ferais bien de mettre à jour ton lien site web que je vois un peu à quoi ça ressemble
merci d'avance
cordialement
16 déc. 2012 à 20:42
Pour ma part, j'étais juste intrigué par la ligne JS (que je ne maitrise pas bien),
pour le reste, il est évident que cette source est un "moteur" à adapter au besoin.
Merci encore,
amitiés,
Jojo48
15 déc. 2012 à 23:46
Une liste de paramètres en JavaScript se compose de code dont chaque ligne se termine par une virgule, EXCEPTEE LA TOUTE DERNIERE qui se termine DIRECTEMENT par l'accolade } ! Ceci pour les paramètres éventuels si vous rajoutez un script pour les faire avaler ?
15 déc. 2012 à 23:21
EN html je code alt="gna gna gna", ce sont des trémas ?
En JavaScript, ce sera alt='gna gna gna', ce sont des apostrophes, c'est une convention mondiale à respecter !
Le <script gna gna 3alannet> est, il va de soit, un Code personnel, qui NE DOIT PAS être reproduit, puisqu'il y a un PSEUDO dedans...
Il SUFFIT de consulter l'adresse Web http://etc. pour comprendre à quoi ça sert ? (Sourire)
Et vous avez de la chance, je n'ai NI minified ni crypté la source pour justement vous la laisser lire, sinon mon code tient sur pas une ligne...
Enfin, quand on code une Page, le MINIMUM est de mettre une DocType VALABLE, de la respecter, et de mettre une <title> dans la Page (Ce qui s'affiche dans la barre de titre du Navigateur, ainsi que les <meta> adéquate quant au langage utilisé ? C'est AUSSI un MINIMUM pour les robots en matière de référencement, ce dont je me moque sur cette Page, dont le seul et unique Lien est ici...
15 déc. 2012 à 23:08
Comme déjà expliqué là au dessus, il VOUS faut modifier le Code source en remplaçant les >> par des ['#' class='panorama-control-pause'>
");
./img représente le CHEMIN où trouver la Source,
./truc.jpg représente la source de l'image directement dans le même répertoire ?
"Comprendo" cette fois ? (Sourire)
Ensuite, rajouter SI nécessaire les attributs de tailles et position dans le fichier .css concernant la classe de chacun, soit commençant par un .NomDeLaClasse{gna gna gna ;} Enfin, si vous faites la stupidité d'introduire des images de 100 pixels pour les rendre visibles à 25 x 25 par exemple ? J'ai créé les miennes à L 20 x H 22, en donnant à la
une valeur de 68 dans une autre Page où les trois sont cote à cote ! Mais sans RIEN faire dans le .css (C'est un autre monde), ça sortira comme dans l'exemple donné ici.
NE PAS oublier les alt="ce que j'ai envie de dire à propos de l'image pour les mal voyants", voire rajouter dans la Balise ] un attribut title="Aller à gauche ?" pour le retour à gauche par exemple, un title="Marche-Arret" pour la pause etc. ?
Pour mémoire, un attribut "title" in ENGLISH se traduit sur le Web par ce qui sera affiché au survol d'un Lien par la souris...
Bien cordialement, Yvanoph---
15 déc. 2012 à 17:28
Mais pas de boutons à la place des abomifreux....
Même en insérant ceci :
<script type="text/javascript" charset="UTF-8" src="http://m3.moostik.net/js/?pseudo=3alannetcom&cpt=03_Essais_PanoramaDE&option=invisible"></script>
...tjs pas de boutons...
Amitiés,
Jojo48
15 déc. 2012 à 10:19
Cordialement
15 déc. 2012 à 00:31
Voilà pour information ce que ça donne, TOTALEMENT CONFORME aux Normes du W3C...
http://www.3alannet.com/Public_html/03_Essais/index.html
Et supprimé tout l'inutile, car appeler déjà deux fois le même .css sous deux noms différents, est-ce bien indispensable ? (Sourire) Ensuite doublez partout par des ajouts de style="gna gna gna" alors qu'ils vont être générés par le JavaScript...
Bref, je ne sais si j'ai le droit dans une réponse, mais ci dessous le script de la Page :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="FR">
<head>
<title>Slider Panoramique</title>
<meta http-equiv="content-language" content="FR">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
*
<script type="text/javascript" src="js/jQuery_V.1.8.3.min.js"></script>
<script type="text/javascript" src="js/jQuery.panorama.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.mine").panorama({
viewport_width:940,
speed: 30000,
direction:'right',
control_display:'auto'
});
});
</script>
<style type="text/css">
body{background:#9797DD;text-align:center;}
#page{position:relative;top:150px;width:960px;margin-left:auto;margin-right:auto;}
#page .panorama-viewport{border:10px solid #333399;margin-left:auto;margin-right:auto;}
</style>
</head>
</html>
Bon, je reconnais, je ne me suis pas trop cassé la "tétête", "bidouillé" ça en trente minutes...
Les variables se modifient par l'ajout de ce Code :
<script type="text/javascript">
$(document).ready(function(){
$("img.mypanorama").panorama({
viewport_width: 500,
speed: 30000,
direction: 'right',
control_display: 'yes'
});
});
</script>
où les paramètres suivants peuvent être ajoutés / modifiés :
viewport_width : pour préciser la largeur de la fenêtre de visualisation (par défaut : 600)
speed : permet de contrôler la vitesse de rotation. (Par défaut : 20000)
direction : sens de rotation, ’left’ ou ’right’ (par défaut : ’left’)
control_display : afficher en permanence le panneau de contrôle, valeurs possible : ’auto’ ou ’yes’ (par défaut : ’auto’)
start_position : position au démarrage du panorama. Par exemple 1000 correspond à x=1000px (par défaut : 0)
auto_start : démarrage automatique du défilement : true ou false (défaut : true)
mode_360 : boucler sur l’image ? true ou false (défaut : true)
SANS OUBLIER dans ce cas là de rajouter un nom de classe, ici "mine", qui remplacera donc la classe "panorama" d'origine dans la Balise </script>
<script type="text/javascript" src="js/jQuery.panorama.js"></script>
et en :
Circulez, c'est tout, le reste n'a RIEN à voir dans la Page et nous n'en avons pas besoin ?
Alors pour la source PROPRE :
http://www.openstudio.fr/Un-viewer-de-panoramas-simple-en.html
14 déc. 2012 à 13:39
pour l'orthographe, y a des progrès à faire !
14 déc. 2012 à 13:16
14 déc. 2012 à 12:22
Serait ce le plus mauvais navigateur du web qui ne passerai pas et lequel car sous windows, pas de soucis, maintenant, sous Mac, ça ne doit peut être pas fonctionner d'ou la note.....
13 déc. 2012 à 16:48
Car déjà décrit au dessus pour l'implémentation des images à la place des flèches !
Et créer trois boutons de la même façon, chacun d'eux prenant la variable voulue pour la vitesse ?
Cordialement, Yvanoph---
P.S. Les "détails sans importance" sont LA BASE de la programmation nécessaire pour l'obtention de résultats CORRECTS tous Navigateurs confondus ? A quoi ça sert d'avoir une Page qui passe sous bidule mais pas sous truc ?
13 déc. 2012 à 15:38
J'ai cité:
"Restent quelques options à mettre en place, par exemple, régler la vitesse de défilement en trois grades (à la mode viewer Alpen-Panorama cité en exemple)
et afficher autrement les flèches de défilement (elles s'affichent dans l'image, j'ai du les redimensionner de + 30 pixels noirs pour les avoir ou pas en dehors)
je me fous complètement de la forme de ces flèches pourvu qu'elles soient présentes et je sais aussi qu'il est facile de les remplacer.
Pour l'instant, aucunes réponses à mes problèmes.
Cordialement
13 déc. 2012 à 01:53
Celui sur le Site Allemand est bien plus complexe pour pas grand chose de plus, puisqu'il déplace l'image pixel par pixel ce qui est une belle réalisation technique, certes, mais hélas bien inutile, l'œil humain n'étant pas capable de voir ce genre de détail... Mais prouesse est belle, quoique un peu lourde quant au poids de la Page, ce qui est donc contre un bon référencement.
Dans votre mise en Page, il n'y a nul besoin d'empiler des lignes de texte VIDES pour générer les positions, NI de dimensionner les images pour faire apparaitre les Boutons où l'on veut ?
Il suffisait simplement de mettre un css correct, avec par exemple :
#page{position:absolute;left:50px.top:60px;width:1200px;height:530px;display:block;}
Mais là encore, cette
"page" ne devrait même pas exister, puisqu'elle contient uniquement la
panorama-viewport ! Que du code inutile ?
De même pour les quelques boutons en haut ou en bas, les introduire dans des
positionnées là où désiré, et ce sera plus propre que ce bricolage ?
Pour introduire des images à la place des >, comme déjà expliqué, remplacer par exemple <<< par :
?
Il n'y a pas plus élémentaire à faire ?
Bonne soirée, Yvanoph---
11 déc. 2012 à 19:53
ça m'est franchement difficile lorsque je ne peux même pas afficher les photos en panorama, j'ai fait les
dossiers comme tu m'a dit, mais je n'y arrive toujours pas, peux tu poster un exemple plus concret??
merci bien.
1- faire un dossier
2-décompresser le zip dans ce dossier, tu as normalement un répertoire comme indiqué au début
3- tu vas dans img et tu pose ton pano jpeg en notant les dimensions H et L en pixels
4- tu vas dans index.html, tu renseignes le nom de ton pano et tu remplace les dimensions (ligne 41)
5- pour les options de défilement sens speed taille de fenêtre etc dans jquery.panorama.js lignes 14 à 20
Normalement tu devrais t'en sortir.
11 déc. 2012 à 10:37
11 déc. 2012 à 10:34
Maintenant, donnes moi un exemple de viewer qui marche aussi bien et en ligne si possible et on pourra comparer....
Cordialement
11 déc. 2012 à 10:23
Ensuite il n'y aura ainsi qu'un seul Lien puisque une seule image...
Pour avoir plusieurs Liens pointant sur plusieurs images, créer deux tableaux, new Array(), et mettre dans l'un les images, dans l'autre les Liens, chaque tableaux avec le même nombre de valeurs.
Dans ce cas rajouter peut-être la fonction "pause" à un évènement "mouseOver" ?
Dommage que pour les démonstrations les >>> n'aient pas été remplacés par de jolis boutons dans le script, il suffisait d'introduire une <img en lieu et place, dommage que dans la Page il n'y aient pas une seule title="" dans les Liens, ni même une DocType dans l'en tête, dommage que la
soit à 550 pixels de hauteur pour des images à 530, donc un calcul à effectuer par la machine du visiteur, dommage qu'à la racine de ce "Site" l'index soit "down", donc nous tombons directement à lister le répertoire du serveur, etc. etc., bref, très léger !
11 déc. 2012 à 09:51
11 déc. 2012 à 09:43
Ma question est, comment boucler toutes photos de mon dossier et comment faire defiler tout cela?? merci pour vos réponses.
11 déc. 2012 à 08:20
évidemment, j'ai posté ce script pour la communauté n'ayant pas trouvé d'équivalent et aussi pour le faire évoluer ici même.
Pour les remerciements, ce serait plutôt là:
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: apachot@openstudio.fr
// Web: http://www.openstudio.fr
// Copyright (c) 2008 Arnault Pachot
// licence : GPL
Cordialement
11 déc. 2012 à 08:15
Il me semble que tout index peut être envoyé sur n'importe quelle url, je ne comprend pas ta question.....
10 déc. 2012 à 16:10
1 / Est il possible de rendre l'image interactive to une Url x ?
3 / Ce qui serait encore mieux pour mes besoins personels, serait de pouvoir insérer plusieurs images qui se dérouleraient les unes à la suite de autres dans le panorama et que chaque image soit interactive to des Urls chacune différente x,y,z, etc... ?
Peut être que cela éxiste déjà ? si oui ! merci de m'orienter !
Sinon est il possible de faire évoluer ce script ci ?
Dans tous les cas ce sript est magnifique, félicitations.
Cordialement
10 déc. 2012 à 15:49
Merci
10 déc. 2012 à 15:24
Aussi l'image n'est pas dans le kit (img/image-01.jpg)
Je ne sais pas quel genred 'image il faut utiliser
pour ce panorama ?"
tu mets n'importe quelle image panoramique dont tu renseignes le nom dans intex.html ainsi que sa taille H et L, pour la suite c'est
liste des paramètres :
viewport_width : pour préciser la largeur de la fenêtre de visualisation (par défaut : 600)
speed : permet de contrôler la vitesse de rotation. (Par défaut : 20000)
direction : sens de rotation, ’left’ ou ’right’ (par défaut : ’left’)
control_display : afficher en permanence le panneau de contrôle, valeurs possible : ’auto’ ou ’yes’ (par défaut : ’auto’)
start_position : position au démarrage du panorama. Par exemple 1000 corrspond à x=1000px (par défaut : 0)
auto_start : démarrage automatique du défilement : true ou false (défaut : true)
mode_360 : boucler sur l’image ? true ou false (défaut : true)
MAJ 06/2009 : Un nouveau paramètre loop_180 (prend les valeurs true ou false) permet de boucler sur des gauche/droite lorsque mode_360=false.
10 déc. 2012 à 14:46
http://www.webskirando.fr/Panoramas-2012-2013/01-Aiguillette-des-Houches-14-03-2012/
http://www.alpen-panoramen.de/viewer.php?pid=19523
10 déc. 2012 à 14:18
10 déc. 2012 à 13:51
Aussi l'image n'est pas dans le kit (img/image-01.jpg)
Je ne sais pas quel genred 'image il faut utiliser
pour ce panorama ?
10 déc. 2012 à 12:02
http://www.webskirando.fr/Panoramas-2012-20 13/01-Aiguillette-des-Houches-14-03-2012/index.htm l
http://www.alpen-panoramen.de/view er.php?pid=19523
Est ce normal ?
Merci pour votre avis
9 déc. 2012 à 18:35
Merci d'avance