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. ;)
Afficher la suite