News Slider

[vincentbazot]

Bonjour,

Connaissez-vous un module de type news slider (avec les fléches droite et gauche pour faire défiler les news)?

J'ai essayé avec wcslider mais on ne peut pas intégrer chaque news avec des balises d'insertion, ces dernières étant limitées au module lecteur d'actualité (j'espère être clair oO).

Le système de pagination du module "liste d'actualités" n'est pour sa part pas dynamique, c'est pour cela que je cherchais une solution basée sur la librairie mootools ou jquery.

Je suis toujours en version 2.11.6

Merci d'avance

[audrey]

Bonjour,

à ma connaissance, non, mais certains autre sont plus informés que moi, donc ...

Pour moi, la solution serait de mettre les mains dans le camboui, et de créer un template spécifique qui permette ce genre de navigation.
Ce qui, à première vue, ne semble pas insurmontable

Si besoin d'aide plus détaillée, fait signe avec un peu plus de détails

[vincentbazot]

Merci audrey, en fait j'ai utilisé l'extension"newsticker" qui fonctionne parfaitement bien

[vincentbazot]

Bonjour et bonne année à toutes et tous.

Je reviens vers vous avec ce module newsticker. Il est très bien seulement là cela fait une semaine que je bloque sur une fonction.

En effet, il est possible de mettre le ticker en pause et en lecture, mais il n'est pas possible de d'avancer et de reculer.
Or j'ai beau tenter d'ajouter une fonction "prev" et "next" dans le newsticker.js cela ne fonctionne pas et je vois pas trop ou faut modifier le fichier mod_newsticker.tpl.
Si vous avez déjà fais quelque chose dans le genre merci de m'aiguiller!

Merci d'avance!

Vincent

[vincentbazot]

En fait je pense que c'est plus un souci de js qu'autre chose, voici ce que j'ai fais jusqu'à maintenant:

le fichier newsticker.js

Code : Tout sélectionner

var Ticker = new Class({
   timer: null,
   initialize: function(el,options){
      this.setOptions(options);
      this.el = $(el);
      this.items = this.el.getElements('li');
      var w = 0;
      var h = 0;
      
      if(this.options.direction.toLowerCase()=='horizontal') {
         h = this.el.getSize().y;
            this.items.each(function(li,index) {
            w += li.getSize().x;
         });
      } else if(this.options.direction.toLowerCase()=='vertical') {
         w = this.el.getSize().x;
         this.items.each(function(li,index) {
            h += li.getSize().y;
         });
      }
      else {
         w = this.el.getSize().x;
         h = this.el.getSize().y;
         this.items.setStyles({
            position: 'absolute',
            top: 0,
            opacity: 0
         });
      }
      
      this.el.setStyles({
         position: 'absolute',
         top: 0,
         left: 0,
         width: w,
         height: h
      });
      
      if (this.options.direction.toLowerCase()=='fade')
      {
         this.fx = new Fx.Tween(this.items[0], {property:'opacity', duration:(this.options.speed/2), transition: this.options.transition}).set(1);
      }
      else
      {
         this.fx = new Fx.Morph(this.el, {duration:this.options.speed, transition: this.options.transition, onComplete:function() {
            var i = (this.current==0) ? this.items.length : this.current;
            this.items[i-1].injectInside(this.el);
            this.el.setStyles({
               left:0,
               top:0
            });
         }.bind(this)});
      }
      this.current = 0;
      
      if (this.options.delay > 0) {
         this.timer = this.next.bind(this).delay(this.options.delay+this.options.speed);
      } else {
         this.next();
      }
   },
   
   pause: function() {
       $clear(this.timer);
       this.timer = null;
   },
   resume: function() {
       if (this.timer == null) {
          this.next();
       }
   },
   next: function() {
      this.current++;
      if (this.current >= this.items.length) this.current = 0;
      
      if (this.options.direction.toLowerCase() == 'fade')
      {
         this.fx.start(1, 0).chain( (function() {
            this.fx = new Fx.Tween(this.items[this.current], {property:'opacity', duration:(this.options.speed/2), transition: this.options.transition}).start(0, 1).chain((function() {
               if (this.options.delay == 0)
                  this.next();
            }).bind(this));
         }).bind(this));
      }
      else
      {
         var pos = this.items[this.current];
         this.fx.start({
            top: -pos.offsetTop,
            left: -pos.offsetLeft
         }).chain( (function() {
            // Update css classes
            this.fx.element.getElements('li').each( function(el, i, items)
            {
               var cls = el.className;
               cls = cls.replace(/odd|even|first|last/g, '').clean();
               
               // First element
               if (i == 0)
               {
                  cls += ' first';
               }
      
               // Last element
               if (i >= (items.length-1))
               {
                  cls += ' last';
               }
               
               // Odd/even
               cls += (i%2 == 0) ? ' even' : ' odd';
      
               // Apply css class
               el.className = cls.trim();
            });
            
            if (this.options.delay == 0)
               this.next();
         }).bind(this))
      }
      
      if (this.options.delay > 0) {
         this.timer = this.next.bind(this).delay(this.options.delay+this.options.speed);
      }
   },
   prev: function() {
      this.current++;
      if (this.current >= this.items.length) this.current = 0;
      
      if (this.options.direction.toLowerCase() == 'fade')
      {
         this.fx.start(1, 0).chain( (function() {
            this.fx = new Fx.Tween(this.items[this.current], {property:'opacity', duration:(this.options.speed/2), transition: this.options.transition}).start(0, 1).chain((function() {
               if (this.options.delay == 0)
                  this.prev();
            }).bind(this));
         }).bind(this));
      }
      else
      {
         var pos = this.items[this.current];
         this.fx.start({
            top: +pos.offsetTop,
            left: +pos.offsetLeft
         }).chain( (function() {
            // Update css classes
            this.fx.element.getElements('li').each( function(el, i, items)
            {
               var cls = el.className;
               cls = cls.replace(/odd|even|first|last/g, '').clean();
               
               // First element
               if (i == 0)
               {
                  cls += ' first';
               }
      
               // Last element
               if (i >= (items.length-1))
               {
                  cls += ' last';
               }
               
               // Odd/even
               cls += (i%2 == 0) ? ' even' : ' odd';
      
               // Apply css class
               el.className = cls.trim();
            });
            
            if (this.options.delay == 0)
               this.next();
         }).bind(this))
      }
      
      if (this.options.delay > 0) {
         this.timer = this.next.bind(this).delay(this.options.delay+this.options.speed);
      }
   }   
});

Ticker.implement(new Options);



Et le fichier mod_newsticker.tpl

Code : Tout sélectionner


<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php if ($this->controls): ?>

<div id="controls-events">

   <div id="ticker_next_<?php echo $this->strId; ?>" class="ticker_next"><a><img src="css/arrow-right.png" width="22" height="28" alt="" /></a> </div>      
   <div id="ticker_prev_<?php echo $this->strId; ?>" class="ticker_prev"><a><img src="css/arrow-left.png" width="22" height="28" alt="" /></a> </div>   
</div>

<?php endif; ?>
<div class="ticker <?php echo $this->direction; ?>" style="height: <?php echo $this->height; ?>px">
   <ul class="ticker" id="ticker_<?php echo $this->strId; ?>" style="width: <?php echo $this->width; ?>px">
    
<?php foreach($this->articles as $article) echo $article; ?>

   </ul>
</div>

</div>
<?php if (count($this->articles) > 1): ?>
<!-- indexer::stop -->
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
   var ticker_<?php echo $this->strId; ?> = new Ticker('ticker_<?php echo $this->strId; ?>', {
      speed: <?php echo $this->speed; ?>,
      delay: <?php echo $this->delay; ?>,
      direction: '<?php echo $this->direction; ?>',
      transition: <?php echo $this->transition; ?>
   });
   
<?php if ($this->controls): ?>
    $$('#ticker_prev_<?php echo $this->strId; ?> a').addEvent('click', function() {
      ticker_<?php echo $this->strId; ?>.prev();
   });
    $$('#ticker_next_<?php echo $this->strId; ?> a').addEvent('click', function() {
      ticker_<?php echo $this->strId; ?>.next();
   });
      
<?php endif; ?>

   
});

//--><!]]>
</script>
<!-- indexer::continue -->
<?php endif; ?>


Mes flèches directionnelles fonctionnent mais "ça s'emballe" (j'ai beau cliqué le ticker continue de tourner) au niveau du défilement après avoir fais un tour complet de l'ensemble des <li>

Merci pour votre aide

[vincentbazot]

Avec un exemple c'est plus clair:
http://test.webanmatch.fr

Le soucis c'est que quand je clique sur la flèche gauche c'est quand même la news d'après qui s'affiche et non celle d'avant. En plus il y a un effet blanc qu'il n'y a pas quand on clique sur la flèche de droite. Bref je galère un peu, merci de votre aide