Partage
  • Partager sur Facebook
  • Partager sur Twitter

BarackSlideshow, petit probleme

Sujet résolu
Anonyme
    23 janvier 2009 à 0:39:50

    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/mooge [...] how/demo.html

    Et voilà le code en question :

    /*
      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.
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      23 janvier 2009 à 0:45:38

      heu ouais super, on a le code de la librairie…

      Mais comment tu l'initialise?
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        23 janvier 2009 à 1:00:55

        Citation : nod_

        heu ouais super, on a le code de la librairie…

        Mais comment tu l'initialise?



        Aucune idée!
        Encore une fois, moi et l'Ajax ca fait 2!
        Non plus sérieusement, en fait j'insere 5 scripts .js dans le début de ma page, that's all.

        J'ai mis les 5 fichiers sur un de mes FTP : http://antoinelavigne.free.fr/js/
        Sinon, voir l'url que j'ai indiqué au début de mon premier post pour plus d'infos.

        J'espere que vous pourrez m'aider !
        • Partager sur Facebook
        • Partager sur Twitter

        BarackSlideshow, petit probleme

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown