Deux scripts qui s'annulent

[Geinoch]

Bonjour, c'est encore moi...malheureusement =)

J'ai un slideshow normal et je tente d'ajouter une gallerie d'image plus bas dans la page (qui n'a aucune relation avec le slideshow identifié plus haut).

Lorsque je met le script de l'un, l'autre cesse de fonctionner et vice versa.

l'un ressemble à ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
function runSlideShow(){
  var oImage = document.getElementById('Slideshow');
  if( oImage){ 
    if( oImage.filters){
      oImage.style.filter="blendTrans(duration=2)"
      oImage.filters.blendTrans.Apply();
    }
    showPic( numEncours);
    if( oImage.filters){
      oImage.filters.blendTrans.Play();
    }
    numEncours = ( numEncours +1) % nbImg;
    timer = setTimeout( runSlideShow, 5000); // 5s
  }

ajoutez-y la déclaration des variables habituelle et etc.

l'autre script est relié à un .js et le code est celui-ci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<script type="text/javascript" src="vaslide.js"></script>
<script type="text/javascript">
	$('slideshow2').style.display='none';
	$('wrapper').style.display='block';
	var slideshow2=new GALERIE.slideshow2("slideshow2");
window.onload=function (){
		slideshow2.info="information";
		slideshow2.thumbs="slider";
		slideshow2.left="slideleft";
		slideshow2.right="slideright";
		slideshow2.scrollSpeed=4;
		slideshow2.spacing=5;
		slideshow2.active="#fff";
		slideshow2.init("slideshow2","image");
	}
</script>

Donc si je fait fonctionner la gallerie, le slideshow reste fixe. Si je fait fonctionner le slideshow, les images n'aparaissent pas dans la gallerie :/.

J'ai lu dans un autre post (javascript et interférence avec d'autres javascript
) que cela pourrait être dû à une sorte de problème avec les gestionnaires d'événement. Cependant les propositions avancées pour régler ce problème était incompréhensible pour un néophyte comme moi.

Si c'est bien cela le problème ou si vous penser que c'est autre chose, votre aide serait bien apprécié...

[SpaceFrog]

ils ne s'annulent pas, ils entrent en conflit...
vu que tu semble utiliser jquery dans l'un des deux, regarde du cote de noConflict()http://api.jquery.com/jQuery.noConflict/

[Bovino]

cela pourrait être dû à une sorte de problème avec les gestionnaires d'événement

Oui, c'est ça...
Lorsque tu écris

Code :

window.onload=function(){...};

tu fais une affectation, ce qui signifie que onload est une propriété de l'objet window (dans ce cas), donc si tu fais plusieurs fois cette affectation, chaque affectation va écraser la précédente.

[Geinoch]

Bonjour et merci pour vos réponses.

ils ne s'annulent pas, ils entrent en conflit...
vu que tu semble utiliser jquery dans l'un des deux, regarde du cote de noConflict()http://api.jquery.com/jQuery.noConflict/

Je vais travailler sur cela durant les prochains jours, car en effet c'est un code JQuery que j'ai modifié (du moins, essayé de modifier).

Pour ce qui est de ta réponse Bovino

tu fais une affectation, ce qui signifie que onload est une propriété de l'objet window (dans ce cas), donc si tu fais plusieurs fois cette affectation, chaque affectation va écraser la précédente.

Si le problème se situe à ce niveau, vais-je devoir le régler avec la fonction noConflict ou as-tu quelque chose d'autre à proposer?

Merci encore, je vous reviens avec des nouvelles dès que je peux !

[SpaceFrog]

non il faut juste ne pas faire de window.onlaod et profiter du

Code :

$(document).ready()

de jquery pour tout lancer

[Geinoch]

Je suis complètement perdu dans le champ...

J'ai essayé, mais à chaque fois ma gallerie cesse de fonctionner dès que je change moindrement le code.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="vaslide.js"></script>
<script type="text/javascript">
	$('slideshow2').style.display='none';
	$('wrapper').style.display='block';
	var slideshow2=new GALERIE.slideshow2("slideshow2");
window.onload=function (){		slideshow2.info="information";
		slideshow2.thumbs="slider";
		slideshow2.left="slideleft";
		slideshow2.right="slideright";
		slideshow2.scrollSpeed=4;
		slideshow2.spacing=5;
		slideshow2.active="#fff";
		slideshow2.init("slideshow2","image");
	}
</script>

Je sais que la ligne de commande que je dois modifier est celle-ci. J'ai essayé de l'amené avec le noConflict ou le document.ready mais je n'y arrive pas. J'ai encore besoin d'un ptit coup de pouce =)

[SpaceFrog]

il est ou le $(document).ready() ???

[Geinoch]

J'ai tenté de le placer à la place du window.onload=function()
Mais, la gallerie cesse complètement de fonctionner. Étais-ce bien à cet endroit que je devais le placer?

[NoSmoking]

Bonsoir,
si ton code javascript est avant ton code HTML alors déplace le window.onload 3 lignes au dessus

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function (){
  $('slideshow2').style.display = 'none';
  $('wrapper').style.display = 'block';
  var slideshow2 = new GALERIE.slideshow2("slideshow2");
  slideshow2.info = "information";
  slideshow2.thumbs = "slider";
  slideshow2.left = "slideleft";
  slideshow2.right = "slideright";
  slideshow2.scrollSpeed = 4;
  slideshow2.spacing = 5;
  slideshow2.active = "#fff";
  slideshow2.init("slideshow2", "image");
};

et comme tu utilises jQuery autant écrire

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
  $('slideshow2').style.display = 'none';
  $('wrapper').style.display = 'block';
  var slideshow2 = new GALERIE.slideshow2("slideshow2");
  slideshow2.info = "information";
  slideshow2.thumbs = "slider";
  slideshow2.left = "slideleft";
  slideshow2.right = "slideright";
  slideshow2.scrollSpeed = 4;
  slideshow2.spacing = 5;
  slideshow2.active = "#fff";
  slideshow2.init("slideshow2", "image");
});

[Geinoch]

ça ne fonctionne toujours pas... Dès que je modifie moindrement, la gallerie cesse de fonctionner.

Dans le cas ici présent, le fond du slider fonctionne, les boutons de navigation gauche et droite aussi, mais les images n'apparaissent plus.

[danielhagnoul]

Bonsoir

Je vous suggère de tester en conservant le code d'origine sauf pour la seconde partie :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="vaslide.js"></script>
<script type="text/javascript">
	$('slideshow2').style.display='none';
	$('wrapper').style.display='block';
	var slideshow2=new GALERIE.slideshow2("slideshow2");
	$( window ).load( function(){
		slideshow2.info="information";
		slideshow2.thumbs="slider";
		slideshow2.left="slideleft";
		slideshow2.right="slideright";
		slideshow2.scrollSpeed=4;
		slideshow2.spacing=5;
		slideshow2.active="#fff";
		slideshow2.init("slideshow2","image");
	});
</script>

N'oubliez pas de charger jQuery avant : <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>.

[Geinoch]

arf negatif...
Je crois que je vais recommencer la gallerie complètement...

Encore une fois... si j'inscris

Code :

window.onload=function (){

La gallerie fonctionne, mais le slideshow plus haut cesse de tourner.

Si j'inscrit tout autre chose, la gallerie cesse de fonctionner et le slideshow reprend =/

[Bovino]

Il serait peut-être judicieux de nous montrer comment tu appelles runSlideShow()...

[sekaijin]

simplement utiliser la norme
addEventListener


une solution SIMPLISIME consiste à ne surtout rien définir au niveau global pas même une fonction.
de la sorte impossible d'avoir un script qui entre en conflit avec un autre. chacun dans son espace et le tour est joué.

et pour ça pas besoin de lib ou de framewok JS propose tout ce qu'il faut.

A+JYT

[NoSmoking]

lourd à parier qu'il doit y avoir un

Code :

<body onload="runSlideShow();">

[Geinoch]

Nosmoking, tu me fais peur, c'est bel et bien de cette façon que j'ai amené mon premier slideshow. J'avais remarqué que le problème pouvait se situer à ce niveau. Que proposes-tu?

Merci encore pour vos réponses c'est vraiment apprécié...

[sekaijin]

faire ce que j'ai dis utiliser addEventListener

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
if (window.addEventListener) {
  window.addEventListener('load', runSlideShow, false);
  window.addEventListener('load', myOtherStartMethod, false);
  window.addEventListener('load', function() {
    alert('this is onload event');
  }, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', runSlideShow);
  window.attachEvent('onload', myOtherStartMethod);
  window.attachEvent('onload', function() {
    alert('this is onload event');
  });
}

tu peux mettre autant de fonction au démarrage que tu veux il suffit d'utiliser la norme.

A+JYT

[Geinoch]

Le problème, c'est que ma gallerie n'est pas amené dans l'en-tête de ma page. J'ai suivi un modèle qui l'insèrait dans le body. Je parle de cette partie:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function (){
  $('slideshow2').style.display = 'none';
  $('wrapper').style.display = 'block';
  var slideshow2 = new GALERIE.slideshow2("slideshow2");
  slideshow2.info = "information";
  slideshow2.thumbs = "slider";
  slideshow2.left = "slideleft";
  slideshow2.right = "slideright";
  slideshow2.scrollSpeed = 4;
  slideshow2.spacing = 5;
  slideshow2.active = "#fff";
  slideshow2.init("slideshow2", "image");
};

Là je suis en partie content de ce que tu avances car en effet, le slideshow n'a plus besoin d'être amené avec un Body Onload... Cependant, si j'insère également la gallerie dans ton code, celle-ci cesse de fonctionner.

[sekaijin]

window.onload signifie "à exécuter lorsque le document a fini de se charger"

il s'agit d'un événement. si tu affecte une fonction à cet évenement ou que tu ajoute un listener avant la fin du chargement lorsque le chargement de la page est fini l'événement se produit et la ou les fonction sont exécuté.

si tu affecte après ou si tu ajoute un listener après l'événement est déjà passé la ou les fonctions ne seront pas exécuté.

pour résoudre ce problème il faut regarder l'état du DOM
document.readyState donne l'état du document. si l'événement onload à déjà eu lieu il suffit d'appeler la méthode sinon ajouter un listenner pour qu'elle le soit lors l'événement aura lieu.

document.readyState

1. uninitialized
2. loading
3. interactive
4. complete

la doc est là
http://www.w3schools.com/jsref/prop_doc_readystate.asp

j'ai vu que tu utilise query
il me semble que cette lib propose une fonction pour ajouter des handler sur onload qui vérifie l'état et fait le nécéssaire.

A+JYT

[SpaceFrog]

non il faut juste ne pas faire de window.onlaod et profiter du

Code :

$(document).ready()

de jquery pour tout lancer