IMR-Network utilise jQuery

Plugin SliderNews

Présentation

Ce plugin très simple sert à une chose : afficher un slider, avec un visuel, et une liste d'élément. On retrouve ce genre de slider un peu partout, et j'avais envie de coder le miens, une seule et bonne fois pour toute.

Ce n'est pas révolutionnaire, ce n'est pas exceptionnel, mais c'est fonctionnel.

Vu que le code est sous GNU GPL, je vous invite à vous amuser avec, si vous en avez envie, et, sinon, à juste l'utiliser pour votre site.

C'est gratuit et ça mange pas de pain.

Télécharger

Exemple

Voici un petit exemple de slider, le plus simple du monde.

Et voici le code responsable de tout ça :


			<script type="text/javascript">

			    $('#slider').slidernews();

			</script>

En réalité, il y en a un peu plus. Mais, concrement, lorsque vous voulez utiliser le slider, vous ne devriez pas à avoir à écrire beaucoup plus.

Téléchargement

Version 0.0.2

Fonctionnalités :

Multi-instance de slider,
Plugin jQuery, testé fonctionnel sous IE7 et Firefox 3,
Animation "fadeIn",
Autant de visuel que l'on souhaite,
Cycle automatique, qui s'arrête lors du passage de la souris sur un item.

Changelog

Version 0.0.2

Correction de bug : par défaut, le slider ne mettait pas à "none" la propriété "display" des éléments à une autre position que celle de départ.

Version 0.0.1

Version basique et fonctionnelle.

Documentation

Installation

L'installation du plugin est très simple. Téléchargez la dernière version à jour, extrayez le fichier "jquery.slidernews.js", et incluez le dans votre page html.

Ensuite, il vous suffit d'utiliser le fonctionnement habituel des plugin jQuery.

A votre charge, par contre, de vous occuper du style css du slider. Je placerais un exemple bientôt pour vous aider, vous pouvez aussi reprendre le style du slider de présentation..

Configuration

A la fonction "slidernews()" vous pouvez passer un paramètre : il s'agit de la configuration. Vous trouverez ci-après la liste des directives, avec leurs valeurs par défauts.

Il s'agit d'une structure associative, dont voici un exemple :


			<script type="text/javascript">

			

			    var settings = {

			        smouth: 1000,

			        time: 5000

			    }

			

			    $('#slider').slidernews(settings);

			

			</script>

debug <boolean> (false): Active ou désactive le débug.
Pas encore implémenté.
list <string> (list): Nom de la classe css de l'élément UL des onglets vers les visuels.
visual <string> (visual): Nom de la classe css de l'élément UL des visuels.
selected <string> (selected): Nom de la classe css à appliquer à l'élément LI onglet correspondant au visuel affiché.
position <integer> (0): Position de départ du slider.
Le premier visuel est à la position 0, le n^ème visuel est à la position (n - 1).
animate <boolean> (true): Active ou désactive l'effet "fadeIn" sur l'apparition du visuel.
smouth <integer> (500): Durée du fadeIn (en milliseconde).
autostart <boolean> (true): Active ou désactive le démarage automatique du slider.
step <integer> (1): Valeur du déplacement.
On peut se déplacer en positif (de l'élément 0 à l'élément n), ou en négatif (de l'élément n à l'élément 0).
On peut se déplacer de plus d'un élément (2, 3, ... x au choix).
time <integer> (3000): Durée entre deux déplacements.