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
News Slider
- audrey
- Membre
- Messages : 282
- Inscription : 07 Mars 2011 09:09
- Localisation : Perpignan
- Contact :
Re: News Slider
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
à 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
-
- Membre
- Messages : 48
- Inscription : 28 Sep 2010 18:55
Re: News Slider
Merci audrey, en fait j'ai utilisé l'extension"newsticker" qui fonctionne parfaitement bien
-
- Membre
- Messages : 48
- Inscription : 28 Sep 2010 18:55
Re: News Slider
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
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
-
- Membre
- Messages : 48
- Inscription : 28 Sep 2010 18:55
Re: News Slider
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
Et le fichier mod_newsticker.tpl
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
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
-
- Membre
- Messages : 48
- Inscription : 28 Sep 2010 18:55
Re: News Slider
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
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
Revenir vers « Développement d'extensions »
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 12 invités