Slideshowimg : mon plugin jQuery pour faire bouger vos images

08.06.2011

Il est encore en développement, mais vu qu'il commence à ressembler à quelque chose et vu qu'il est déjà fonctionnel, je vous le mets en démo et en download afin que vous puissiez vous faire une idée.

PlugIn SlideShowImg :

Il va vous servir à faire bouger une image à l'intérieur d'une div.

Pour celà rien de plus simple.

Explications :

- commençons d'abord par l'html :

<title>Plugin Slideshowimg</title>

<header><h1>Plugin Slideshowimg</h1></header>

</div>

</article>

</section>

</html>

Il vous suffit de mettre l'image à faire bouger (slider) dans une div qui a une id.

- Deuxième étape le javascript :

$(document).ready(function(){

$("#slideimg").slideshowimg({direction:"left"});

});

Il faut appeller dans votre page html votre script jquery et celui du plugin (voir en rouge plus haut).

Dans votre script il vous suffit d'appeller la fonction slideshowimg() sur votre div #slideimg créée précédement.

Les options du plugin :

Elles sont peu nombreuses pour l'instant vu que j'ai juste commencé à travailler dessus.

- width (définit la largeur d'affichage), 200 automatique (en px) ;

- height (définit la hauteur d'affichage), 200 automatique (en px) ;

- tempoBefore (définit le temps pour le premier passage de l'image), 5000 automatique (en ms) ;

- tempoAfter (définit le temps pour le retour de l'image), 5000 automatique (en ms) ;

- direction (définit la direction de défilement de l'image).

Améliorations futures possibles :

- Ajout d'un paramètre position, effectuera surement soit un centrage de l'image en fonction de la direction soit un crop de l'image ;

- Ajout d'une div de description de l'image (facultative bien évidemment) qui sera soit bloqué soit s'affichera au passage de la souris ;

- Ajout d'une gestion multi-images ;

- Ajout d'une gestion de différents easing (effets de transitions).

démo et download