Deux scripts qui s'annulent

**Geinoch** · 10/12/2012, 21h08

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 :

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
 
<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 :

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
 
 
<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** · 11/12/2012, 08h33

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** · 11/12/2012, 08h39

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

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

Code :

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

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** · 12/12/2012, 03h25

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** · 12/12/2012, 08h34

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

Code :

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

$(document).ready()

de jquery pour tout lancer

**Geinoch** · 17/12/2012, 16h21

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 :

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

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** · 17/12/2012, 16h57

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

**Geinoch** · 17/12/2012, 18h01

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** · 17/12/2012, 22h03

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

Code :

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

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 :

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

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** · 18/12/2012, 00h37

ç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** · 18/12/2012, 22h31

Bonsoir

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

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
<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** · 19/12/2012, 01h33

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

Encore une fois... si j'inscris

Code :

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

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** · 19/12/2012, 07h49

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

**sekaijin** · 19/12/2012, 14h56

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** · 19/12/2012, 18h26

lourd à parier qu'il doit y avoir un

Code :

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

<body onload="runSlideShow();">

**Geinoch** · 23/12/2012, 23h54

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** · 24/12/2012, 10h13

faire ce que j'ai dis utiliser addEventListener

Code :

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

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** · 24/12/2012, 17h35

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 :

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

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** · 25/12/2012, 11h44

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

uninitialized
loading
interactive
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