Discussion :

[zeb188]

Bonjour à tous,
je sais que le sujet a été traité mais apres 40 essais j'y arrive toujours pas
je suis une bille en javascript mais j'essaye d'apprendre

voici mon code : l'objectif : Se balader sur une photo panoramique et pouvoir cliquer dessus via des area pour ouvrir une petite video

Ca marche super bien, mais séparément :-(
j'ai utilisé videobox et virtual tour

si quelqu'un a une idée ... ca serait génial
Dans mon head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--  videobox -->
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/mootools.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/swfobject.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/videobox.js"></script>
<link rel="stylesheet" href="http://www.auxsaveursdelamer.fr/css/videobox.css" type="text/css" media="screen" />
 
 
 
<!--  jquery virtual tour -->
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/thickbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/jquery.panorama.css" media="screen" />
 
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.panorama.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("img.advancedpanorama").panorama({
	                auto_start: 0,
                        start_position: 0
			/*ajoutez ici éventuellement d'autres 
                          paramètres d'exécution */
	         });
	});
</script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/cvi_text_lib.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.advanced-panorama.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.flipv.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/thickbox.js"></script>

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$.noConflict();

Le principe étant de libérer la variable $ pour l'autre bibliothèque, tu ne peux pas l'utiliser ici...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery.noConflict();

[danielhagnoul]

Bonsoir

Il est également nécessaire de mettre de l'ordre dans vos déclarations de script.

1. les bibliothèques et les plug-ins non jQuery.
2. jQuery et les plug-ins jQuery.
3. votre code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script>
	jQuery.noConflict();
	jQuery(document).ready(function($){
		$("img.advancedpanorama").panorama({
			auto_start: 0,
			start_position: 0
			//ajoutez ici éventuellement d'autres paramètres d'exécution
	    });
	});
</script>

[zeb188]

Merci pour vos retours
j'ai essayé ca , alors la videobox fonctionne mais pas le virtual tour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--  videobox -->
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/mootools.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/swfobject.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/js/video/js/videobox.js"></script>
<link rel="stylesheet" href="http://www.auxsaveursdelamer.fr/css/videobox.css" type="text/css" media="screen" />
 
 
 
<!--  jquery virtual tour -->
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/thickbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/jquery.panorama.css" media="screen" />
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/thickbox.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/cvi_text_lib.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.advanced-panorama.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.flipv.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.panorama.js"></script>
<script type="text/javascript">
	jQuery.noConflict();
	jQuery(document).ready(function($){
		$("img.advancedpanorama").panorama({
			auto_start: 0,
			start_position: 0
			//ajoutez ici éventuellement d'autres paramètres d'exécution
	    });
	});
</script>

[danielhagnoul]

Bonsoir

En n° 2 je disais : "jQuery et les plug-ins jQuery". Mais vous n'avez pas mis de l'ordre. Essayez dans l'ordre ci-dessous, mais je ne garantis rien, car je n'ai pas testé. Il faut relire les documentations de chaque plug-in pour vérifier les interdépendances, tel plug-in ayant besoin que tel autre soit déclaré avant lui.

Vérifiez également que jquery.advanced-panorama.js et jquery.panorama.je ne font pas double emploi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--  jquery virtual tour -->
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/thickbox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.auxsaveursdelamer.fr/virtualtour/css/jquery.panorama.css" media="screen" />
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/thickbox.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/cvi_text_lib.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.flipv.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.panorama.js"></script>
<script type="text/javascript" src="http://www.auxsaveursdelamer.fr/virtualtour/js/jquery.advanced-panorama.js"></script>