wSlide, plugin jquery qui va faire glisser vos listes

30/01/2008
Projets Allez aux commentaires

Je vous présente wSlide, mon 1er plugin pour jQuery (enfin, officiellement) !

wSlide va vous permettre de transformer n'importe quelle liste en une sorte de visionneuse, aussi bien pour du texte que pour des images. La pagination peut être automatiquement générées, ou pas.

Rien ne vaut une démonstration live:

Voici les explications ....

Pourquoi ce plugin ?

Principalement pour gagner de la place dans vos pages web. Les longues listes sont souvent fatigantes à lire, on scroll dans tous les sens. Vous pourriez par exemple alléger vos sidebars en regroupant plusieurs parties avec ce plugin.

Features

  • Pagination automatique (désactivable)
  • Personnalisation facile par CSS
  • Choix de la position de départ
  • Choix du sens de glissement (horizontal ou vertical)
  • Possibilité de défilement en diagonal
  • Compatible avec le plugin easing (pour des effets, comme le rebond)
  • Possibilité de fondue
  • Choix de la durée de la transition

Testé sur ...

  • Firefox
  • Opera
  • Internet Explorer 6 et 7

Exemples

Téléchargement

Installation

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
  • 2. Prenons une simple liste html comme celle-ci
<ul id="ma_liste">
        <li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
        <li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
        <li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
        <li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
        <li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
        <li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
        <li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
        <li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>
  • 3. On ajoute le bout de javascript qui va initialiser la liste, et en même temps définir les options.

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.

$(document).ready(function(){//on attend que la page soit chargée
        //on donne l'id de la liste visée, et on lui donne ses paramètres
        $("#ma_liste").wslide({
                width: 500,
                height: 333,
                horiz: true
        });
        //si vous avez d'autre listes, placez leur code d'initialisation ici à la suite ....
        //$("#autre_liste").wslide({ ...
});
 

Options

Les options sont à définir lors du code d'initialisation ({option1: val, option2: val, option3: val, etc ...})

  • width et height : La taille du bloc qui contiendra votre liste (Défaut= 150)
  • pos : La position de départ par défaut (Défaut= 1)
  • col : Le nombre de colonnes, si plus grand que 1, alors vous aurez un effet de navigation en diagonal (Défaut= 1)
  • effect : Le type d'effet que vous voulez pour la transition, pour celà il vous faudra le plugin easing (Défaut= swing)
  • fade : Transition avec effet d'apparition et disparition, du coup, le sens de la transition n'importe plus (Défaut= false)
  • horiz : Active le défilement horizontal (Défaut= false)
  • duration : La durée de la transition en millisecondes (Défaut= 1500)
  • autolink : Indique si vous voulez un menu de navigation généré automatiquement. Si vous creez votre propre menu, mettez autolink: false. Si vous voulez que le menu soit généré automatiquement, mais dans une autre div, mettez autolink: 'id_de_la_div_menu'

Questions ?

Conclusions

Comme c'est mon 1er plugin, il est possible que vous rencontriez une ou deux coquilles (que je me ferais un plaisir de corriger, dans la mesure du possible). Pour les exemples, j'ai commenté le code source des pages pour que vous puissiez vous en inspirer.

jQuery rulllllllllezzzzzzz !

Traduction

-----

Pages: Page suivante

Articles relatifs

←  Older Comments
Newer Comments  →

  • Pingback: 10 Best jQuery Sliders « Nulls()

  • Olivier M

    Bonjour,

    j’ai aussi la même question que plusieurs personnes : comment faire défiler automatiquement les photos dans un ordre pré-féfini ?

    Merci

  • Symbiose

    Bravo pour ce boulo !!! Je trouve ça vraiment sympa mais comme zuck et chelmi j’aimerai aussi savoir comment remplacer les chiffres par du texte.
    Merci d’avance

  • Je tiens à te félicité pour ce travail remarquable. Bonne continuation.

  • Excuseme?Is this system have an control panel?

  • fred

    bonjour et merci pour ce plugin.
    petite question pour ceux qui s’y connaissent:
    comment faire pour ajouter une navigation  »previous/next » sur les images elles mêmes (qqchose comme cela http://nivo.dev7studios.com/)?
    merci d’avance.
    fred

  • McKANE

    Merci pour cette prouesse, ça me facilite bien la vie!!!

  • DraytAns

    Bonjour,
    J’ai un petit soucis avec ce code :
    le javascript se met en marche (le code est exécuté à certains endroits), mais les liens ne marchent pas.
    je crois que le soucis est dans l’application du js : mes balises sont dotées d’un attribut rel= »0:0″, et je crois que les ‘0’ devraient être remplacés par des valeurs numériques autres.
    J’ai buché sur le code, mais rien n’y fait,
    quelqu’un a une idée ?

  • tata

    Salut là
    comment ajouter des boutons suivant / précédent
    Merci

  • Minime

    Bonjour, merci pour ce plugin !
    Ça marche bien lorsque j’utilise le fichier jquery.js inclus dans le demo mais je n’arrive pas à le faire fonctionner avec mon fichier jquery 1.4… quelqu’un a t-il réussi ? Est-ce possible ? Je n’ai pas d’erreur mais la liste ne trourne simplement pas, elle reste toujours à la même position (défaut)… Merci !

  • Labourette

    Bonjour,
    Mon site est en construction et je souhaitais mettre du jquery sur mes pages et votre site me plait vraiment c’est super génial.
    Mais malheureusement je ne connait pas trop le jquery alors je me demandais si vous pouviez m’aider.
    Je vous donne un peu ce que j’ai déjà mis en place, bien sur ça ne fonctionne pas.
    Merci beaucoup de votre aide

    DANS MA PAGE NAVIGATION

    $(document).ready(function(){
    $(« #menu_body »).wslide({
    width: 400,
    height: 250,
    autolink: false,
    fade: true,
    duration: 2000
    });
    });

    Galeries

    Partitions
    Photos
    Vidéos
    La presse

  • Pingback: codeCreation.pl | Slider przyjacielem twym()

  • guillaume

    Bonjour,
    je viens de mettre wslide sur mon site internet, mais je constate un probléme sous ie :/
    la première pages s’affiche correctement, mais quand la seconde page ce charge(effet fade) je constate une dégradation de la police aux niveau du titre h1, mais pas sur le texte, voici une capture http://www.apf-entreprises-calais.fr/test/Sans%20titre.JPG
    si quelqu’un à la solution…

  • tata

    Hi guys…this is super indeed…and for those who still asking how to change autolinks 1,2,3,4 you find on my site..www.redka3d.com.
    i change the autolinks with image or you can change it with button next or previous

  • Ashley R.

    J’ai trouvé une solution pour le PREV / NEXT (précédent / suivant) :

    On récupère l’id du slide activé :

    var pos = parseInt($(‘a.wactive’).attr(‘href’).substring(2));

    Ensuite, on incrémente ou décrémente ce chiffre selon si l’on veut avancer ou reculer :

    var start = pos+1;

    Enfin on execute la commande :

    $(‘a[href*= »‘+start+' »]’).trigger(‘click’);

  • Pingback: 35 Best jQuery Sliders/Slideshows With Demos, part 4 | de77.com()

  • Pingback: wSlide, plugin jquery qui va faire glisser vos listes + modification :) « SuperBenoit Developpeur web 2.0 php flash ajax()

  • Jani

    Vous pouvez faire pivoter toutes les x secondes?

    Exemple: sans avoir à cliquer sur n’importe quel nombre de paging, en changeant le curseur met en évidence toutes les 5 secondes.

    Merci et félicitations pour plugins jQuery, est excellent.

  • Toutenplastok

    Bonjour,
    Est ce que l’utilisation de ce plugin, est soumit à une licence particulière ?

    Cordialement

  • It is very Useful for me and i am also web developer in ahmedabad.

  • Shikiryu

    @fred et pour tous ceux qui voulaient une navigation « précédente » / « suivante ».
    Même si ce plugin commence à dater, il est léger et je l’utilise sur mon site depuis pas mal de temps. Je lui avais ajouté cette fonctionnalité.

    Il suffit de rajouter du HTML :
    #image de précédent##image de suivant#

    Du CSS pour caler les images où vous le souhaitez :
    .navBtn{position:absolute; top:60px; z-index:999; display:none;}
    #previousBtn{left: 60px;}
    #nextBtn{right: 60px;}
    (il faut bien sur que l’élément parent où se trouve le tout soit en position:relative)

    et Wslide modifié : http://www.shikiryu.com/js/jquery.wslide.min.js en minifié ou http://www.shikiryu.com/js/jquery.wslide.unpacked.js pour voir tout le code

  • Shikiryu

    HTML : [a href= »# » class= »navBtn » id= »previousBtn » title= »Précédent »]#image de précédent#[/a]
    [a href= »# » class= »navBtn » id= »nextBtn » title= »Suivant »]#image de suivant#[/a]
    en remplaçant les [ ] (crochets) par des (inférieurs supérieurs) vu que ça ne passe pas au niveau des commentaires

  • apacer

    Cool plugin, great work, man! But it will be better and more effieccient if there will be auto scrolling support..how do i can set up auto scroll? 🙁

  • Pingback: 13 Most Useful Jquery Effects to Build Interesting Website | Vishnu Valentino()

  • dg_dev

    Bonjour,
    J’aimerai que ce super plugin passe d’un slide au suivant automatiquement en gardant bien sur l’accès à chaque …
    Je ne sais pas comment m’y prendre…
    Merci de votre aide,
    Dg_Dev

  • dg_dev

    Bonjour,
    Super ce plugin, juste une question : peut-on rendre le passage de slide automatique ?
    Si quelqu’un l’a fait merce d’avance de votre aide, je ne sais comment m’y prendre sans risquer de tout casser 🙂
    dg_dev

  • Whoop

    I found this small but handy piece of code that Ktoso has written to incorperate a timer to allow auto scrolling of wslide. Looks like a few others are after this too 😉

    http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/

  • trucs et astuces

    Attention, avec IE9, il semble que le plugin ne passe pas sur cette version du navigateur.

    Pour cela, il faut créer un fichier.js afin de corriger le bug des balises dl,dd,dt.

  • ozgur

    hi,
    wSlide, plugin jquery Auto Slide function code?
    auto slide

    How to make the automatic slide transition,please help me…

  • Hey this is really cool but how can i set an auto play function?

  • Edith

    Un pardon, mais je ne parle pas français. Il écrivait ce commentaire pour te dire : des voeux! Plugin excellent!

    Des saluts depuis le Chili

  • Pingback: wSlide jQuery Plugin « Jquery Labs()

  • Shikiryu

    Bonjour / Hi,

    J’ai mis à jour depuis la dernière fois : http://webinventif.com/wslide-plugin/#comment-61832 afin d’avoir l’auto-play.
    ——-

    I did an update since last time http://webinventif.com/wslide-plugin/#comment-61832 to have autoplay.

  • maze

    Bonjour bonjour !
    Voilà j’ai une question assez simple mais je ne trouve pas la réponse !
    Où doit-on enregistrer le dossier dans Wp ? dans le dossier thème que l’on utilise ? Et où doit on mettre les , dans le header.php du thème wordpress ?

    C’est beaucoup de question mais je sèche, j’ai essayé mais rien n’y fait !

    Merci beaucoup de votre aide !

    Laurent

  • Pierrot

    Et bah franchement, merci !

    Voilà, c’est tout ! :p

  • Steven

    hi,
    wSlide, plugin jquery Auto Slide function code?
    auto slide

    How to make the automatic slide transition,please help me…

  • saillantist

    Bravo pour plugin très bien fait et déconcertant de simplicité de mise en place

  • Bonjour Shikiryu,

    est-ce que c’est possible de rendre visible les de la liste pour les _imprimer_ par un print.css?
    Quel div faut-il adresser?

    Salutations de Berlin
    Eric

  • Alain

    @Steven Quelqu’un aurait il un fichier complet, js+html du plugin avec l’auto play actif?

    Cela serait un moyen agreable et fiable de diffuser ce code….

    Merci

  • Volzy

    Hi there,

    great script you created. I was wondering if it was possible to have a list (ul) inside the wslide container? So inside the slide there is an unordered list which does NOT slide.

    Lorem ipsum….
    More Lorem ipsum…

    Basically I want to know if there is a « STOP » button, so only the first unorded list is part of the slide..

  • hsmr

    J’utilise aussi le plugin Wslide et merci pour toutes les contributions.
    J’utilise la dernière version permettant d’avoir des boutons « Précédent/Suivant » et l’autoplay.
    Sauf que lorsque j’essaie de supprimer les boutons avec l’option
    button:false
    l’autoplay ne marche plus (même en forçant autoplay:true).
    Quelqu’un aurait une solution (j’aimerais avoir l’autoplay sans les boutons « Précédent/Suivant ») ?
    Merci d’avance.

  • but to make sure that there is a scroll automatically?

  • Gracias , me ayudo mucho este programa .

  • bob

    Bonjour.
    La taille de mes blocs où j’utilise ce plugin varie tout le temps. J’aimerais donc que les chiffres qui s’affichent pour passer au bloc suivant soient juste en dessous de la dernière ligne de chaque bloc. Comment faire ? Peut-on utiliser le « auto » pour le height ?
    $(« #news »).wslide({
    width: 380,
    height: auto
    });
    merci 🙂

  • hi,
    thx for this slider, is good, but:
    i had problems, if i had ul>li>ul>li

    there is upgrade – http://test.berycz.net/slideshow/

  • roberto

    Hi, i can’t speak french so i write in english, i hope this is not a problem. My question is: there is a possibility to have a parent4 in a parent1?

  • Flo

    Salut, super comme plugin, c’est exactement ce que je cherchais.

    Cependant, j’ai des images (précédent, suivant) mais rien ne se passe lorsque je cliques dessus.

    Help ^^

    Merci

  • Juanlu

    Sorry for my my English
    IE9 not work well, someone has the solution?
    View this page in error http://www.cerveceriaelzurito.es

  • Dav

    Je n’arrive pas à activer le défilement auto… si quelqu’un peut me filer un peu d’aide… Merci

  • Bonjour,
    J’ai légèrement modifié votre script pour prendre un compte l’arrêt de l’animation sur mousehover, si vous êtes intéressé, je suis à votre disposition …
    Cordialement

←  Older Comments
Newer Comments  →