Discussion :

[antlavoinign]

Bonsoir,
j'essaye d'intégrer le Barackslideshow à mon site, seulement je ne m'y connait pas vraiment en Ajax..
J'ai réussi à l'intégrer comme je voulais, à le personnaliser, seulement il y a une chose que je n'arrive pas à faire : changer l'effet de transition par défaut.

Voilà la démo du concepteur : http://devthought.com/wp-content/moo...show/demo.html

Et voilà le code en question :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/*
  BarackSlideshow 0.2
    - Libraries required: MorphList <http://devthought.com>
    - MooTools version required: 1.2
    - MooTools components required: 
        Core: (inherited from MorphList)
        More: Assets
  
    Changelog:
    - 0.1: First release
    - 0.2: Added 'transition' option. Can be slide-(bottom|top|left|right) or fade, or a function that returns any of those values
           Added 'tween' to options to customize the transition effect
           BarackSlideshow::show now also alters the menu state
           Other tiny changes
*/
/*! Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */
 
var BarackSlideshow = new Class({
 
  Extends: 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.menuitems.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);
  },
 
  click: function(ev, item) {
    this.parent(ev, item);
    new Event(ev).stop();
    this.show(this.menuitems.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.menuitems[index])
    this.morphTo(this.menuitems[index]);
		return this;
  },
 
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
  }
 
});

La transition par défaut est : "slide-fade progression"
Et j'aimerais que ce soit : "fade", sans voir à cliquer sur le bouton radio correspondant.

Il y a bien transition: 'fade' vers le début du code, seulement je n'ai pas touché à celui-ci et ce n'est dont pas la solution pour avoir la transition fade par défaut.

Comment faire?

Merci énormément d'avance.

[RomainVALERI]

Même si c'est de l'AJAX, ce sont surtout des spécialistes de Mootools qui te seraient utiles ^^
Tu jettes un oeil ici de temps en temps ?

[Bovino]

Dans le fichier demo.js de la page en lien, tu trouves :

Code :

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

var slideshow = new BarackSlideshow('menu', 'pictures', 'loading', { transition: slideTransition, auto: $('option-auto').checked });

J'imagine qu'en modifiant le transition, cela devrait fonctionner...

[antlavoinign]

Dans le fichier demo.js de la page en lien, tu trouves :

Code :

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

var slideshow = new BarackSlideshow('menu', 'pictures', 'loading', { transition: slideTransition, auto: $('option-auto').checked });

J'imagine qu'en modifiant le transition, cela devrait fonctionner...

Bonjour à toi,
effectivement je n'avais pas vu ce petit bout de script, qui m'interesse pour mon problème. Je n'arrive cependant pas à le mettre en 'fade' :

J'ai essayé de remplacer slideTransition par fade et fadeTransition et transition-fade, mais sans succès. Je n'arrive pas à trouver la bonne syntaxe à mettre.



EDIT : J'ai trouvé. Il ne fallait pas modifier cette partie du code, mais le début du même script. Pour ceux que ca intéresse :

Code :

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

1
2
window.addEvent('domready', function(){
  var transition = 'fade';

Merci à vous pour votre aidE.