Discussion :

[fanfan_web]

Bonsoir,
J'ai un soucis concernant l'utilisation de 2 script et j'espère que je suis au bon endroit pour poster mon problème.

Tout d'abord je suis débutant dans ce domaine et c'est grâce à vos sites et réponses que l'on peut comprendre et avancer

Voici mon problème :
Je souhaite utiliser 2 script dans une même page
- Script permettant un slideshow
- Script permettant l'ouverture d'une fenêtre "popUp"

Pour le script slideshow j'ai utilisé "BarackSlideshow.js" dont voici son 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var BarackSlideshow = new Class({
 
  Extends: Fx.MorphList,
 
  options: {/*
    onShow: $empty,*/
    auto: false,
    autostart: false,
    autointerval: 2000,
    transition: 'fade',
    tween: { duration: 700 }
  },
 
  initialize: function(menu, images, loader, options){
    this.parent(menu, options);
    this.images = $(images);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;      
      $(loader).fade('out');
      if (this.current) this.show(this.items.indexOf(this.current));
      else if (this.options.auto && this.options.autostart) this.progress();
    }.bind(this) });
    if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  },
 
  auto: function(){
    if (!this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
 
  onClick: function(event, item){
    this.parent(event, item);
    event.stop();
    this.show(this.items.indexOf(item));
    $clear(this.autotimer);
  },
 
  show: function(index) {
    if (!this.loaded) return;
    var image = this.imagesitems[index];    
		if (image == this.curimage) return;
    image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
		image.getElement('img').setStyle('display', 'block');
    var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide': 
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function(){ 
      this.auto();
      this.fireEvent('show', image); 
    }.bind(this));
    this.curimage = image;
    this.setCurrent(this.items[index])
    this.morphTo(this.items[index]);
		return this;
  },
 
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  }
 
});

Le script "PopUp", j'ai utilisé ce 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
 
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="img/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
 
		return false;
	});
 
 
});
 
</script>

Mon soucis est qu'il ne fonctionne pas ensemble.

Si je désactive (ou je crois qu'on dé-commente) le premier, le second fonctionne.
Si je dé-commente le second, le premier script fonctionne.

Ai-je oublié quelque chose pour faire fonctionner ces deux scripts?
Y a t-il des erreurs dans l'utilisation des scripts?

Je vous remercie par avance pour vos réponses.

[sekaijin]

c'est QUOI l'erreur ?

[Bovino]

A priori, l'utilisation de multiples frameworks qui utilisent le raccourci $, d'où une incompatibilité liée à un conflit de nommage...

Utiliser plusieurs frameworks est rarement (histoire de ne pas dire jamais) une bonne idée...

[Willpower]

Comme le dit Bovino tu utilises probablement mootools et jquery en même temps et comme le dis Bovino toujours, c'est mal. Cependant, il existe une solution (malgré qu'on te déconseille d'utiliser les 2) :

Au lieu de :

Code :

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

1
2
3
$(document).ready(function(){
	...
});

Remplace par :

Code :

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

1
2
3
4
jQuery.noConflict()(function(){
	var $ = jQuery;
	...
});

Note: cette solution est aussi simple car tu n'utilises pas les deux codes dans le même bloc, autrement tu aurais du remplacer tous les "$" d'un de deux codes par un autre nom/symbole. (typiquement "$" par "jQuery")

[Bovino]

Code :

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

1
2
3
jQuery(function($){
//...
});

est même suffisant : à l'intérieur de la fonction anonyme, le symbole $ est réservé à jQuery, à l'extérieur, c'est celui de MooTools.

[Willpower]

Code :

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

1
2
3
jQuery(function($){
//...
});

est même suffisant : à l'intérieur de la fonction anonyme, le symbole $ est réservé à jQuery, à l'extérieur, c'est celui de MooTools.

bien vu (je ne connaissais pas le paramètre jQuery de la fonction) par contre laisse "noConflict" car avec les dernières version de mootools + jquery, le $ vaut jQuery (que tu exécutes jQuery ou mootools en premier).

Au final donc :

Code :

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

1
2
3
jQuery.noConflict()(function($){
	...
});