Plugin jQuery : easyTicker, faîtes défiler vos blocs

plugin-jquery-easytickerCitons l’auteur de ce plugin jQuery (st3ph de mushtitude.com) :

jQuery – easyTicker … permet de créer simplement un (ou plusieurs) « newsticker »  à partir d’une liste.


Il permet donc de réaliser effet de transition entre plusieurs éléments d’un même bloc que leurs contenus soient du texte ou des images.

Un exemple avec du texte :

[html]
<ul class="easyticker">
<li style="display:block;">
<strong>Premier élément</strong>
</li>
<li>
<strong>Second élément</strong>
</li>
<li>
<strong>Troisième élément</strong>
</li>
</ul>
[/html]

Et pour l’activer :

[javascript]
$(document).ready(function() {
$(‘.easyticker’).easyticker({
speed: ‘fast’, // Optional: default ‘slow’
dureeAffichage: 2000 // Optional: default 5000
});
});
[/javascript]

Malheureusement, c’est à vous de créer le CSS qui va avec :

[css]
ul.easyticker {height:150px;overflow:hidden;position:relative;}
ul.easyticker li {display:none;left:0;position:absolute;top:0;}
[/css]

Autre défaut, c’est à vous de faire en sorte que le premier élément soit visible.

Vous pouvez cependant constater que la vitesse de transition et le temps d’affichage sont configurables.

Petite précision bien utile : en plus de jQuery (logique non ?), il vous faudra le plugin jquery.timers

Lien :

Article written by devzonefr

Développeur d'applications de formation, je me suis aujourd'hui spécialisé dans le développement web.

Laisser un commentaire