Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
8 juin 2011 3 08 /06 /juin /2011 20:03

http://t2.gstatic.com/images?q=tbn:ANd9GcR25lkVDvLcB6pF_X057xIalEJbbLUm5iZvF_zSsOOsWEDqON3Yxw

 

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 :

 

 

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

    <meta charset="utf-8">

    <title>Plugin Slideshowimg</title>

    <link rel="stylesheet" href="css/styles.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

    <script type="text/javascript" src="js/slideshowimg.js"></script>

    <script type="text/javascript" src="js/scripts.js"></script>

    <section id="wrapper">

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

        <article>

                <div id="slideimg">

                    <img src="img/image_slider_2.jpg" alt="img2"/>

                </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

Partager cet article

Repost 0
Published by AtChA - dans Programmation
commenter cet article

commentaires

Balt 02/06/2016 08:59

Excellent tutoriel. Moi, j’ai connu le plugin JQuery grâce aux vidéos sur http://www.alphorm.com/tutoriel/formation-en-ligne-jquery. C’est très pratique comme le votre aussi. Merci pour ce partage.

Antonin 08/06/2011 20:58



Pas mal le rendu ,)



 395149_10150485772854288_664024287_8595839_1160149945_n.jpg

Bonjour et bienvenue.

Je mé présente AtChA.

Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.

Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.

Recherche

Catégories