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
 →
  • zelda

    Bonjour,

    Très bon script, rien a redire, mis apart qu’il ne supporte pas les imbrications ( si je fais 2 slide .. .. cela marche, mais par contre si je fais quelque chose comme ca : .., cela pose problème, je m’en sers car j’ai un menu général sur mon site qui va afficher le contenue de chaque li (donc chaque page), mais dans le contenue de ces pages je souhaite rappeler la fonction slide, d’où le problème ..

    Si quelqu’un a une solution ça serait vraiment génial.

  • Julien

    Vos prières ont été entendues les amis ! Le plugin est en train d’être mis à jour !

    Ce qui est déjà finalisé (mais pas encore dispo, patience): possibilité d’imbriquer des listes, choix du type d’éléments html pour la liste (plus forcement ul li, fonctionne avec tout, genre div a img, etc …), possibilité d’afficher plusieurs « blocs » en même temps (faire glisser les blocs 2 par 2 par exemple), désactivation des CSS pour encore plus de personnalisation.

    Ce qui arrive bientôt: défilement automatique (oui oui) avec autopause et autonav (next/prev)

    Et a priori on devrait toujours rester sous les 5ko (je vise 4 maxi)

    Patience ! 😉

  • the-dubber

    @Julien

    Cool !

    Je viens de découvrir votre plugin qui est fort intéressent !
    Vivement la mise a jour, l’autoplay sera vraiment un plus !

    J’ai une question cependant, je n’arrive pas à faire marcher le slide si je place la div qui contiens les ul>li en display:none par défault, (dans le but de faire un show (une apparition du slider) en cliquant sur un bouton).

    Y a t-il une astuce ?

    Merci d’avance !

  • Julien

    Bon voilà, à priori le défilement automatique est bouclé ! Possibilité d’activer la navigation next/prev et autopause au survol ou pas. Fonctionne bien avec jQuery 1.7. Maintenant faut que je test le bousin sur les autres navigateurs et que je fasse une grosse mise à jour des exemples et de l’article…

    @the-dubber ça marche chez moi 😉

  • the-dubber

    @Julien

    Pour le display:none j’ai fais quelque test pour comprendre pourquoi il ne marche pas chez moi, je me suis aperçu de ceci :

    – ne marche pas si le display:none est définis dans le css ou dans le html
    – ne marche pas si le display:none est définis en jquery avant l’apelle de la div par $(« #parent3 »).wslide …
    – marche si on le met après le $(« #parent3 »).wslide …
    – marche si par défault le display est définis en block, puis qu’on le redéfinis en none en cliquant sur un bouton par exemple (donc une fois le document chargé).

    Le problème ne vient peut être que de moi , mais sa me semble un peut étrange.

    Vivement la mise a jour =)

  • Julien

    Pour les impatients, voici la beta de wslide 2.0: http://pastie.org/2955277

    Nouveautés:

    -Ajout de la fonction diaporama (avec choix de la durée, afficher ou pas la navigation prec/suiv, pause au survol)
    -Possibilité d’utiliser autre chose que des listes (une simple succession d’images img fonctionnera) et possibilité d’imbriquer des éléments de même famille
    -Possibilité de supprimer certain style par défaut pour encore plus de personnalisation
    -Possibilité de faire glisser les « blocs » par paquet
    -Possibilité d’afficher une légende (attribut « rel » sur éléments enfants, possible de définir un autre type d’attribut genre title ou alt)

    Encore 2-3 petites choses vont être changées mais rien d’important. Les exemples et la doc arriveront dans quelques jours. En attendant, le code et documenté (+ ou -) 😉

    @the-dubber étrange. J’ai mis display: none en css, puis un simple 

    $("#parent3").show();

    (dans le $(document).ready évidement) et ça roule. Si t’as une page en ligne pour voir le bug en question …

  • the-dubber

    @Julien
    Super !!

    Merci beaucoup pour la beta ^^, c’est vraiment du bon boulot, tout est excellent.

    J’ai tout essayer pour voir si il y avais des bugs, et j’en ai trouver un ou deux lister ci-dessous :

    – si on met l’autoplay à false, il faut que l’autopause le sois aussi, sinon il relance l’autoplay et impossible de faire une pause une fois relancer, donc autoplay:false + autopause:true = problème (d’un coter c’est normal de mettre les deux a false si on arrette l’autoplay ).

    – navmenu, c’est pour faire apparaitre le next et prev ? en mode auto il apparait bien, mais en mode « true ou false » il n’apparait pas.

    – les imbrications marchent très bien, aucun problème, par contre les attributs : caption,captionOpacity,captionPos j’ai essayer de changer les valeurs mais je n’ai pas remarquer de changement ?

    Sinon tout le reste marche niquel, j’ai essayer sur firefox, opéra, safari, ie9, ie8 et chrome, pas de problème.

    Par contre ça ne marche pas sous ie7, j’ai une double erreur : « Expected identifier, string or number »,le javascript plante. (d’un côté il commence à ce faire vieux ie7 .. ).

    Voila pour les petites erreurs que j’ai trouver, sinon pour mon problème de display:none, pour être précis le slider et le menu apparaisse bien mais c’est le slide qui ne marche pas (si on clique sur 3 dans le menu par exemple, on reste figé sur le 1), sauf en définissan le display:none après $(« #parent3″).wslide .

    J’essaierais de mettre en ligne le problème dans les prochains jours pour mieux te montrer, en tout cas merci pour tout.

    Bonne soirée

  • the-dubber

    petite edit :

    pour le problème du navmenu, le problème est que « true » est de type texte dans ce cas la, donc il faut mettre : if(h.navmenu == « true ») à la place de if(h.navmenu == true)

  • Julien

    @the-dubber Ok 1er bug corrigé (j’ai pas encore testé tous les cas de figures), j’ai mis le code du précédent message à jour.

    Edit: Pour navmenu oui ok il faut bien typer le paramètre, amis ça c’est à l’utilisateur de faire attention 🙂

    Pour caption, il faut que tu mettes un attribut du genre:

    <li rel=titre ici">

    Pas encore testé sous ie7 et 6, j’vais jeter un oeil mais je tient à ce que ça marche sous ie7.

  • the-dubber

    Oui ça n’en sera que mieux si ça marche sur ie7 ^^

    Je voulais savoir, crois-tu que ce sois possible de faire une adaptation pour pouvoir définir la taille de la fenêtre (width et height) en « pourcentage » ou en « auto » ?

  • Julien

    @the-dubber Pour height en auto c’est ok (le conteneur prendra la valeur du plus haut des enfants). Le width auto aussi, il prend la largeur dispo du conteneur. Le pourcentage ok, mais par contre il ne sera pas « fluide », donc il prendra la valeur x% a l’affichage de la page mais ne sera pas redimensionné si la taille de la fenêtre change car ça plombe beaucoup trop les perfs !

  • the-dubber

    D’accord merci de ta réponse, donc en auto il est fluide au resize mais pas en pourcentage ? j’ai essayer de mettre width = « auto » pour la largeur, le cadre prend bien la largeur du conteneur, le resize marche, mais par contre le slide ne ce fait plus que verticalement ( la propriété horiz = true ) ne semble pas être pris en compte en « auto ».

  • Julien

    @the-dubber Oui oui en fait le resize fluide ne pourra se faire que sur un style vertical et en « auto ». Si tu veux une valeur en %, à toi d’englober le slider dans une div avec largeur en %. Toutes ces limitations sont provoquées à cause de l’utilisation de padding/margin sur les éléments enfants. Quand on (re)défini la largeur/hauteur des blocs enfants il faut à chaque fois faire le calcul pour chaque bloc (car ils peuvent avoir des valeurs différentes). La solution simple serait que le script englobe chaque bloc dans une div, mais c’est impossible puisque selon le type d’enfant utilisé ça risque de provoquer des erreurs d’affichage (avec les listes par exemple). Donc permettre le resize dynamique dans le sens horizontal entraine le recalcul de toutes les largeurs à chaque mouvement de resize (événement appelé des centaines de fois par seconde lors du resize).

    Sinon j’ai:

    – ajouté une navigation au clavier
    -amélioré le fonctionnement du multibloc (au lieu de multiplier par X les dimensions du conteneur pour faire rentrer les x blocs, il divise les dimensions des blocs pour tout rentrer dans un conteneur de taille normal).
    -ajouté la possibilité de créer ses propres boutons de next/prev (comme pour le menu en fait)
    -testé sous ie6-7-8-9 et ça à l’air de tourner (sauf la nav prev/next sous ie6 et la nav au clavier uniquement sous ie8 et +)

    Me reste donc a résoudre un bug au niveau des classes .wactive en multibloc, permettre le width: auto même en horizontal (mais sans resize du coup) et préparer les styles CSS pour ceux qui veulent personnaliser au mieux le slider. Par contre ça va être difficile de rester sous les 5ko du coup -_-, j’en suis déjà à 5,3 ko (compressé mais pas gzippé)

  • the-dubber

    D’accord merci pour tes réponses précises, je comprend mieux le problème maintenant, et effectivement le resize consomme beaucoup de ressources.

    5.3 ko c’est déja bien optimiser je trouve pour toute les fonctions que propose ce plugin ^^

    Sinon cool pour les nouvelles fonctionnalités, vivement la sortie finale =)

  • mike521

    Bonjour,
    J’ai tester la version beta que j’ai vue dans les commentaries, très bon plugin, fort pratique, j’ai une requête cependant, est-ce qu’on peut faire en sorte que en cliquant sur un bouton (bouton de pause) l’autoplay ce mette en pause ? (comme avec le hover en fait )

    Merci

  • the-dubber

    Je reviens après quelque semaine avec nouvelle question =)

    J’ai un menu avec diverse page parcouru en jquery (donc pas de rechargement de page).
    Sur chaque page j’ai placer un slider Wslide avec le défilement auto du slide.

    Ma question : Est-il possible de faire en sorte que lorsque j’arrive sur ma page, le slider concerné revienne en première position avec le temps de l’autoplay remise a zéro (comme quand on fait un next ou prev ..) ?

    J’ai réussi à faire en sorte de revenir sur la première position en procédant comme ceci :
    var indexpage = idparent // ici je récupère l’id du slider
    $(‘a[href= »#parent’+indexpage+’-1″]’).trigger(‘click’); // on arrive en premiere position

    Mais le problème est que le slider continue de défiler entre chaque slide (donc si on arrive au moment ou l’autoplay va changé, on ne reste passe directement au slide suivant sans voir le premier).

    Voila pour mon problème, en espérant que tu puisse m’aider si tu passe par la ..

    Merci d’avance

  • the-dubber

    J’ai réussi, en fait pour que le slider soit remise a zéro il faut faire l’opération ci-dessous côté script js de wslide.

    $(« a[name=’navigation’] »).click(function(e) // evenement changement de page
    {
    clearInterval(thisinterval);
    thisinterval = goNext(a.find(‘a.wslide-nav-next’));
    });

  • iAlex

    Hi, it does’t work when one in another, for example, parent2 does’t work in parent1…

  • Alex

    Bonjour,

    J’ai testé le script, il fonctionne très bien et est très pratique !

    Cependant, quand je vais sur ie7, il plante alors que sous firefox, pas de problème.

    J’ai lu dans les commentaires qu’il a été testé sur tous les navigateurs IE.

    Quelqu’un a-t-il une idée du problème que je pourrai avoir ?

    Apparemment c’est au lancement du bout de javascript que j’ai l’erreur :

    $(document).ready(
    function(){//on attend que la page soit chargée
    $(« #defilement »).wslide({

    (Erreur à la 3eme ligne)

    Après, j’ai la bêta 2.0, peut-être que c’est ça le problème !

    Merci :p

  • Julien

    @mike521 ok ça sera ajouté 😉

    @Alex oui la béta plante sous ie7, depuis j’ai corrigé ce soucis, une nouvelle béta devrait arriver dans quelques jours

  • Alex

    Ok merci Julien 🙂

  • mand

    Bonjour, j’ai découvert ce plugin récemment et c’est parfait, félicitation.

    Je fais un petit UP parce que depuis le mois de janvier plus de nouvelle, est-ce qu’il a une date de release pour la version 2.0 ?

  • d3im0s

    Bonjour,
    Voilà, après avoir parcouru l’ensemble des commentaires et tester la plupart des codes.
    Est-il possible d’avoir un zip avec les fichiers de la dernière version du plug in (avec autoplay corrigé, etc..)s’il vous plait?

    Je ne suis pas très doué en javascript et j’avoue que copier coller un bout de code par un autre puis corriger ceci ou cela, je ne m’en sort plus et plus rien en fonctionne 🙁
    Chez moi l’effet de fade se fait bien tout seul mais c’est systématiquement la première en trée qui s’affiche.
    D’avance un énorme merci,bien à vous,
    d3im0s

  • pingoographx

    Je viens de trouver une faille dans ton script et je ne sais pas si l’erreur vient de moi ou pas mais quand je l’utilise avec du html ou du php ça fonctionne, et dès que je veux mettre du javascript sur la même pas ça le rend incompatible et il arrête de fonctionner. Tu aurais une solution?

  • Aphax

    Salut,

    Merci pour ce bel outil 🙂
    Je ne sais si tu effectues encore de la maintenance dessus, mais au cas ou :
    j’ai tout de même pu remarquer quelques dysfonctionnements lorsqu’on déclare un .wslide() sur un conteneur qui est caché, les coordonnées dans les attributs rel sont toutes à 0 du coup et le slide ne fonctionne pas.
    Cela vient du fait que tu te base sur les offsets des éléments au sein du slide-[container]-wrap pour calculer les coordonnées de déplacement, et que ces valeurs sont à 0 je pense lorsque l’élément est invisible.
    Pour palier à ça temporairement, j’ai modifié le script de manière à ce que les coordonnées des attributs rel soient calculées directement à partir des valeur des options h.width et h.height renseignées par de dev, par contre cela oblige de faire des conditions supplémentaire pour calculer en fonction de l’orientation du défilement, en tout cas ça pourrait être une piste pour améliorer ton script.

    En espérant que cela puisse t’aider !

  • Olivier

    allo, ou est-ce que l’on retrouve les nouvelles versions de ce plugin, car je remarque que les commentaire date du début de l’année 2012, est-ce qu’il y a une nouvelle version?

←  Older Comments
 →