Timeline Me

TimelineMe - ​http://mickaelr.github.io/jquery-timelineMe/ - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps.

Le présent plugin pour SPIP l’utilise et propose un modèle pour afficher les articles d’une rubrique de cette manière :

<rubriqueX|timelineme>

X est bien le numéro de la rubrique dont on veut lister les articles.

Le tri des articles est du plus récent en haut au plus ancien en bas. Si on choisi d’utiliser les numéros de titre, ils seront triés du plus grand chiffre en haut vers le plus petit en bas.

Les encarts affichent en alternance le titre d’un côté de la ligne, et de l’autre côté le chapeau des articles, avec un bouton « voir plus » pour lire le texte, « voir moins » pour le masquer.

On peut utiliser ce modèle avec quelques paramètres d’appel :

|sens=inverse (changer le sens de tri des articles.)

|background=#8DD8DD (détermine la couleur d’arrière-plan)

et si on utilise :
|orientation=horizontal

alors on peut ajouter au choix :
|scrollArrows=true (false par défaut)
|scrollBar=false (true par défaut)
|scrollZones=true (false par défaut)

Exemple :

<rubrique2|timelineme|sens=inverse|orientation=horizontal|scrollArrows=true|scrollBar=false>

Nota bene : Pour l’instant, aucune mise en forme n’est possible dans les textes (chapeau ou texte), et donc aucun lien ni aucune image non plus.

À faire : L’idéal serait justement de trouver une solution pour afficher la mise en forme des textes, les liens et les images incluses.

Discussion

3 discussions

  • Bonjour,

    j’essaye d’integrer un timelineme dans un squelette mais que neni
    alors si quelqu’un pouvais me donner le code a utiliser.

    voici le code utilisé :
    [(#MODELE{timelineme})]

    et mon modele
    <rubrique11|timelineme>

    bien sur j’ai des article publié dans la rubrique 11

    Répondre à ce message

  • 1

    Bonjour. J’adore ce plugin. Je voudrais savoir s’il serait possible d’augmenter la taille d’un cercle d’un article considéré plus importante que les autres ? Ainsi, comme l’exemples des périodes géologiques, une période plus grande aurait un statu hiérarchique plus important que les autres. Ou peut être modifier la couleur d’un cercle donné ça pourrait marcher aussi...

    • Bonsoir,
      c’est apparemment possible, il faut chercher en css comment modifier ça, et dans quelle condition, un mot-clef ou un critère. Dans les styles, cf .timeline-me-milestone .timeline-me-label .timeline-me-picto

    Répondre à ce message

  • Bonjour,

    Je viens de rajouter au plugin 3 évolutions mineures :

    • utiliser le descriptif rapide si pas de chapo
    • utiliser le logo de rubrique si pas de logo d’article
    • utiliser le plugin Centre Image s’il est là

    Enjoy !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom