Conflit Javascript...

Fermé
rpue - 17 juil. 2011 à 14:29
 Utilisateur anonyme - 24 juil. 2011 à 20:30
Bonjour,

J'ai installé sur mon site un diaporama (http://devthought.com/2008/06/11/barackslideshow-an-elegant-lightweight-slideshow-script/) en javascript.
Je suis plutôt débutant en la matière mais je m'en suis finalement sorti.

Par contre, je souhaiterais en avoir un deuxième sur ma page, ce qui ne fonctionne pas. J'imagine aisément qu'il s'agit d'un conflit entre les deux par rapport au CSS, mais au delà de l'intuition, je bloque.

Voici le javascript

*/

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);
  }
  
});



puis je l'appelle dans mon body :

<div id="slideshow">
	<span id="loading">Loading</span>

	<ul id="pictures">
		<li><img src="http://www.monsite.eu/docs/menuslide/image1.png"  alt="image1" title="image1" /></li>
		<li><img src="http://www.monsite.eu/docs/menuslide/image2.png" alt="image2" title="image2" /></li>
		<li><img src="http://www.monsite.eu/docs/menuslide/image3.png" alt="image3" title="image3" /></li>
		<li><img src="http://www.monsite.eu/docs/menuslide/image4.png" alt="image4" title="image4" /></li>
		
	</ul>

	<ul id="menu">
		<li><a href="http://www.monsite.eu/docs/menuslide/image1.png">image1</a></li>
		<li><a href="http://www.monsite.eu/docs/menuslide/image2.png">image2</a></li>
		<li><a href="http://www.monsite.eu/docs/menuslide/image3.png">image3</a></li>
		<li><a href="http://www.monsite.eu/docs/menuslide/image4.png">image4</a></li>
		
	</ul>
</div>



Maintenant je voudrais en insérer un deuxième avec une image de background différente et des photos différentes... Mais je n'y arrive pas... :euh:

J'espère avoir expliqué mon cas le plus clairement possible.

Un immense merci d'avance si quelqu'un sait me donner un tuyau pour y arriver. ;)

1 réponse

Utilisateur anonyme
24 juil. 2011 à 20:30
Il faut modifier tout le premier menu en renommant pas mal de trucs en "transition2" par exemple.

J'ai chopé la page démo, j'essaye de voir ça mais ça va être le bazar.

En fait, pour avoir toutes les options propres à chaque slideshow, il faut copier et modifier le .js, le .css et la page qui comporte les deux slideshows.
0