JS Scroller : Bannière défilante

Le plugin « Javascript Scroller » vous propose d’afficher une bannière défilante présentant vos derniers articles parus, vos dernières brèves ou même un aperçu des documents et images de votre site.

Page de démonstration : http://demo-spip3.ateliers-pierrot.... (documentation livrée avec le plugin).

Installation

  1. Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html.

Utilisation

Chaque entrée de la liste, selon le type d’élément choisi, présente le titre de l’élément en question, un lien vers sa page ainsi que sa présentation.

Ce widget s’inclut dans vos squelettes en utilisant la balise #JS_SCROLLER :

#JS_SCROLLER{ width , height , type , maximum , coupe, direction , titre }

dont toutes les options sont facultatives (une valeur vide [1] vaudra la valeur par défaut) et correspondent à :

  • width et height : les dimensions du bandeau (par défaut 600 x 20 pixels, hauteur de 100 pixels pour les documents),
  • type : le type d’éléments SPIP présentés : ’articles’, ’breves’, ’sites’, ’rubriques’ ou ’documents’ (par défaut les articles),
  • maximum : le nombre d’entrées affichées (par défaut 50),
  • coupe : le nombre de caractères du texte présenté pour chaque entrée (par défaut 40),
  • direction : la direction du texte sous forme de code ’ltr’ ou ’rtl’ (par défaut ’ltr’ : de gauche à droite) [2],
  • titre : le titre du bandeau.

Concernant le titre du bandeau

La valeur par défaut de l’argument de la balise est ’defaut’, le titre ajouté sera alors construit depuis les chaînes de langues du plugin (chaîne du type « Les 20 derniers articles parus : ») [3]. Si vous voulez un titre vide, indiquez ’non’ pour cet argument [4]. Une valeur vide utilisera le titre par défaut.

Vous pouvez également préciser une chaîne de caractères qui sera utilisée comme titre personnel. Celle-ci sera passée si c’est possible par la fonction de traduction de SPIP : si vous souhaitez utiliser par exemple « <:mon_plugin:ma_chaine :> », indiquez simplement « mon_plugin:ma_chaine ».

Cas des documents

La boucle « documents » du plugin renvoie un bandeau présentant un aperçu des documents images du site (typiquement les documents portant les extensions ’gif’, ’jpg’ et ’png’).

Personnalisation

Styles CSS du bandeau

La balise charge le fichier « js_scroller.css », qui définit les styles CSS du bandeau. Vous pouvez modifier ce fichier selon vos besoins.

Vos propres boucles

Le plugin charge l’un des fichiers XML de son répertoire ’xml/’ [5]. Vous pouvez y ajouter votre propre boucle XML en créant un nouveau fichier dont le nom doit commencer par « scroller_items_ » suivi de l’argument que vous passerez dans l’attribut ’type’ de la balise.

Vos boucles doivent définir un ’item’ par objet comprenant les entrées XML suivantes :
-  « titre » : le titre de l’entrée (obligatoire),
-  « lien » : l’URL du lien créé sur ce titre (obligatoire),
-  « description » : le texte de description ajouté après le titre,
-  « url_doc » : l’URL du document (cas des images - doit être relative),
-  « width » et « height » : la taille du document (cas des images),
-  « typedoc » : le type MIME du document (cas des images - optionnel).

Il est conseillé d’indiquer des URLs relatives.

Par exemple pour lister les logos des brèves de la rubrique 2, créez le fichier « scroller_items_logos_breves.html » dans le répertoire « xml/ » du plugin contenant la boucle :

<BOUCLE_scroller(BREVES) {id_rubrique=2}{par date}{inverse} {pagination #ENV{counter}}>[(#LOGO_BREVE|=={''}|non)
	<item>
		<titre>[(#TITRE|supprimer_tags|texte_backend)]</titre>
		<lien>[(#URL_BREVE|texte_backend)]</lien>
		<description>[(#INTRODUCTION|couper{#ENV{couper}}|texte_backend)]</description>
		<url_doc>[(#LOGO_BREVE|image_reduire{0,#ENV{height}}|extraire_attribut{src}|texte_backend)]</url_doc>
		<width>[(#LOGO_BREVE|image_reduire{0,#ENV{height}}|extraire_attribut{width}|texte_backend)]</width>
		<height>[(#LOGO_BREVE|image_reduire{0,#ENV{height}}|extraire_attribut{height}|texte_backend)]</height>
	</item>
]</BOUCLE_scroller>

Puis appelez la balise comme ceci [6] :

#JS_SCOLLER{'',100,logos_breves,'','',#LANG_DIR,non}

Tester vos réglages

Vous pouvez tester les différentes options de la balise en éditant le fichier ’contenu/doc_js_scroller.html [7] dans le répertoire du plugin. Il s’agit du squelette de la documentation livrée avec le plugin (n’oubliez pas de recalculer la page après avoir modifié des réglages).

Exemples

Pour créer un bandeau présentant vos documents avec un aperçu de 50 pixels de haut, indiquez :

#JS_SCROLLER{'',50,documents}

Résultat :

Pour créer un bandeau présentant les 20 dernières brèves du site, dont les présentations seront coupées à 100 caractères et dont l’affichage dépendra de la direction de la langue courante :

#JS_SCROLLER{'','',breves,20,100,#LANG_DIR}

Résultat :

Pour créer un bandeau classique avec un titre personnel :

#JS_SCROLLER{'','','','','','',Mon titre perso}
// pour utiliser une chaîne de langue :
#JS_SCROLLER{'','','','','','',mon_plugin:ma_chaine}
// pour ne pas avoir de titre du tout :
#JS_SCROLLER{'','','','','','',non}

Résultat :

Notes

[1Pour rappel, chez SPIP une valeur vide dans une balise s’écrit : ’’.

[2Vous pouvez ici utiliser plus simplement la balise SPIP « #LANG_DIR ».

[3Vous pouvez modifier ces valeurs dans les fichiers de langue du répertoire ’lang/’ du plugin.

[4Comme c’est conseillé la plupart du temps, indiquez simplement le mot « non » sans guillemets (ni double ni simple - cf. dernier exemple de cette page)

[5Ou plus généralement de tout répertoire « xml/ » présent dans un répertoire de squelettes.

[6Attention : le plugin cherchera par défaut un titre du type ’titre_bandeau_$type’ dans son fichier de langue, où ’$type’ est l’argument de la balise. Il est donc conseillé de toujours préciser un titre, ou « non » pour un titre vide, dans le cas des boucles personnelles.

[7Différentes propositions d’utilisation de la balise sont mentionnées en commentaire à partir de la ligne 12 du squelette.

Une version alternative de la balise ne générant pas de liens cliquables mais une simple suite de textes est disponible sur cette page : http://trac.ateliers-pierrot.fr/p/P....

Discussion

26 discussions

  • 2

    Répondre à ce message

  • 4
    benolaos

    Bonjour,
    ce plugin est exactement ce dont je rêvais. Mais chez moi l’appel au fichier/xml/scroller_items_xxxxx ne fonctionne pas. J’ai tout essayé, mais les boucles ne renvoient rien... pouvez-vous m’aider ?
    Je suis sur SPIP 3.0.10 et serveur en local.
    Merci

    • Re-bonjour,
      Je crois avoir réellement tout essayé, mais il doit y avoir un bug : les boucles ne remontent aucune information... J’espère que quelqu’un pourra résoudre ce « petit » problème, car sur le papier, ce plugin semble vraiment très intéressant.
      Merci

    • Bonjour,
      désolé de ne pas avoir répondu avant, je n’avais pas vu ton message ...

      Si tu as toujours des problèmes, n’hésite à reposter ici, je répondrai plus rapidement.

      @+

    • j’ai le même problème : c’est comme si le scroller_items_xxx ne s’exécutait pas !

    • Voilà ce qu’on obtient comme message dans spip.log :

      « JS_SCROLLER PLUGIN : lecture du xml »http://monsite.org/?page=content_scroller&type=articles&counter=50&couper=40&width=600&height=20« impossible »

      Je suis en spip 2.1.12

    Répondre à ce message

  • Bonjour,
    Ce plugin fonctionne très bien. Merci.
    Mais je voudrais que, dans le cas de documents, l’url renvoie vers l’article contenant ce doc et non sur l’image elle-même.
    Est-ce possible ?
    Merci d’avance.

    Répondre à ce message

  • 1

    Bonjour,
    Le pluging fonctionne très bien.
    J’ai voulu effectué un tri des articles à afficher avec un motclé comme l’a fait William avec l’aide de Piero....mais là ça ne marche plus :
    Voilà ce que j’ai fait :
    J’ai créé un fichier nommé « scroller_items_MONSCROLLER.html » que j’ai placé dans le dossier xml et qui contient ce qu’il y a en image jointe

    J’ai placé la balise suivante à l’endroit voulu
    #JS_SCROLLER’’,’’,MONSCROLLER’,10,100,#LANG_DIR,dernières parutions,3.5

    J’ai ensuite créé un mot clé « alerte » et j’ai attribué ce mot clé aux articles que je souhaitais voir apparaître dans la bannière
    et là seul « dernières parutions » défile
    J’ai aussi essayé en mettant id_mot=alerte dans le fichier« scroller_items_articles.html » mais le résultat est identique au précédent
    Je suis sous spip 3.0.17
    Merci de m’aider à résoudre ce pbl

    • J’ai trouvé la réponse à ma propre question
      Il ne faut pas utiliser id_mot=alerte mais titre_mot=alerte

    Répondre à ce message

  • Bonjour, Une petite question : on doit entrer une largeur en pixels. Or, mon squelette est responsive. Quelque chose est-il prévu pour pouvoir renseigner une largeur dynamique ou doit-on prévoir cela en css ? Merci :-)

    Répondre à ce message

  • AlainM45

    Bonjour,

    Peut-on avoir les x derniers articles uniquement de l’agenda ?

    Merci.

    Répondre à ce message

  • 2

    L’idée de ton plugin me plait beaucoup ! Bravo !

    J’ai juste 2 questions :

    Il est conseillé d’indiquer des URLs relatives.

    Pourquoi ???

    type : le type d’éléments SPIP présentés : ’articles’, ’breves’, ’sites’, ’rubriques’ ou ’documents’ (par défaut les articles),

    Peut-on ajouter ses propres objets editos, créés et injectés par un plugin ou issu d’une boucle DATA par exemple ?
    Sinon comment penses tu que nous pourrions l’intégrer ?

    Bon Week end ;)

    • Salut,

      Il est conseillé d’indiquer des URLs relatives.

      Parce que comme ça tu peux tester en local puis les URLs fonctionnent toujours en prod ... mais ce n’est pas obligatoire du tout.

      Peut-on ajouter ses propres objets editos

      Oui, bien sûr. En fait, l’argument type est utilisé pour construire le nom du fichier XML qui générera les données affichées. Par exemple pour le type « articles », le plugin ira chercher le squelette xml/scroller_items_articles.html.
      Tu peux donc créer ton propre squelette dans un répertoire squelettes/xml/, le nommer scroller_items_XXX.html et passer l’argument XXX à la balise ... et le tour est joué ;)

      @+

    • Bon bah hop ! adopté ! Merci beaucoup :)

    Répondre à ce message

  • 11
    William

    Je ne parviens pas à faire en sorte que la bandeau affiche les articles et brèves liées à un mot. Que faut-il mettre dans le code à la place de « articles » ?

    Merci d’avance pour votre aide.

    • Bonsoir William,

      En fait, cette fonctionnalité n’est pas tout à fait prévue par défaut ... mais tu peux t’inspirer du squelette squelette-dist/mot.html qui t’indiquera comment procéder pour boucler sur les objets liés à un mot. Attention à bien respecter les « items » du XML.

      Si tu nommes ton fichier scroller_items_MONSCROLLER.xml, tu indiques dans la balise :

      #JS_SCROLLER{X,Y,MONSCROLLER}

      N’hésite pas si tu as des problèmes ...
      @+

    • William

      Merci pour ton aide : j’y suis parvenu sans trop de difficulté ! ;) Désormais, tous les articles auxquels j’ajoute le mot clé « alerte » passent dans le bandeau, ce qui me permet d’en faire un bandeau « Dernières minutes » et de sélectionner uniquement les articles que je souhaite.

      Encore merci et bonne continuation !

      William

    • William

      Autre petite question (je ne sais pas si c’est possible).

      Comment peut-on faire pour que le bandeau affiche les articles avec le mot clé choisi, MAIS AUSSI les brèves avec le même mot clé ?

      J’ai bien les articles, mais je ne sais pas comment modifier le XML en conséquence pour ajouter les brèves aux articles. Quel code faut-il ajouter ?

      D’avance merci.

      William

    • Salut,

      Cool que tu aies réussi ;)

      Pour la liste des brèves c’est tout simple : tu fais une autre boucle sur les « BREVES » avec les mêmes filtres que pour celle des « ARTICLES » et le tour est joué ...

      @+

    • William

      J’ai essayé mais je ne sais pas comment procéder. Voici ce que j’ai mis dans le XML scroller_items_mots.html

      Merci.

      William

    • Bonsoir William,

      Tu as juste oublié d’encadrer tes brèves dans des balises <item>...</item> tout simplement ;)

      @+

    • William

      Merci, j’ai rectifié, mais cela ne fonctionne pas. Le bandeau n’affiche plus que le titre si je mets la boucle sur les articles et les brèves. Quand il y en a une seule, ça fonctionne, mais avec les deux non.

      Une idée ?

      Bonne soirée.
      William

    • Voici le modèle que tu devrais utiliser :

      <BOUCLE_scroller_articles(ARTICLES) {id_mot=XXX} {par date}{inverse} {pagination #ENV{counter}}>
      	<item>
      		<titre>[(#TITRE|couper{#ENV{couper}}|supprimer_tags|texte_backend)]</titre>
      		<lien>[(#URL_ARTICLE|texte_backend)]</lien>
      	</item>
      </BOUCLE_scroller_articles>
      <BOUCLE_scroller_breves(BREVES) {id_mot=XXX} {par date}{inverse} {pagination #ENV{counter}}>
      	<item>
      		<titre>[(#TITRE|couper{#ENV{couper}}|supprimer_tags|texte_backend)]</titre>
      		<lien>[(#URL_BREVE|texte_backend)]</lien>
      	</item>
      </BOUCLE_scroller_breves>

      Remplace le XXX par ton ID mot et le tour est joué.

      @+

    • William

      Super, ça marche parfaitement désormais ;)

      Une dernière chose... je ne pense pas que ce soit prévu ni possible, mais est-il possible d’insérer une image (genre un gif clignotant type « dernières minutes ») à la place du titre texte du bandeau ?

      En tout cas, encore merci pour le suivi ! Avec ma customisation, cela s’intègre parfaitement à mon site.

    • Non, effectivement, ce n’est pas prévu par le plugin ...

      Mais tu peux tenter avec le code ci-dessous (si ton image est dans ton répertoire de squelette) :

      #SET{_img,"<img src='"#CHEMIN{ton-image.png}"' alt='' />"}
      // puis tu mets à la place du titre dans la balise:
      #GET{_img}

      J’ai testé et ça a l’air de fonctionner mais c’est un peu de la bidouille :( (en gros je déconseillerai fortement cette utilisation, mais vu que ça semble marcher ...)

      @+

    • William

      Merci, je vais tester ça.

      Bonne continuation, et à bientôt.

      W.

    Répondre à ce message

  • 1
    Admin CMOV Gym

    Bonjour à tous,

    J’ai créé le site internet du club de gym dont je suis président, et je souhaiterais utiliser JS SCROLLER pour afficher les brèves (fermeture exceptionnelle de gymnase, absence d’un prof etc ...).

    J’appelle donc simplement le plugin comme ceci : #JS_SCROLLER(755,40,breves,20,100,#LANG_DIR,’Infos : ’)
    dans le fichier sommaire.html de ma distrib (en fait du squelettte saka-spip 3 qui est utilisé sur le site).
    Le bandeau s’affiche bien avec son titre au bon endroit, sous l’édito du site, parfait !,, mais aucune brève n’est récupérée alors que le site en comporte 2 (elles sont affichées dans colonne navigation à gauche du site).
    Voici le résultat ici : http://cmovgymdansetrampo.free.fr

    Quelqu’un aurait-il une idée ? Ai-je oublié de faire qqe chose, mais quoi ?
    Merci de votre aide...

    • Bonsoir,

      Mince, je suis désolé mais j’ai laissé passer ton message ...
      As-tu toujours besoin d’un coup de main ? Je n’ai pas vu le scroller sur ton site, j’imagine que tu as laissé tomber ... vraiment désolé :(

      N’hésite pas si tu as des questions (je répondrai plus rapidement, promis).

    Répondre à ce message

  • 4

    Bonjour,
    J’ai testé avec succès ma balise sur la page d’essai js scroller mais je ne sais pas où je dois l’installer exactement dans mon squelette :
    -  dans quel fichier ? sommaire.html, site...
    -  à quel endroit exactement mettre le code ?
    J’ai essayé un peu partout dans la page sommaire mais rien ne se passait .
    Pour info le site a été construit avec evahabillage.
    merci d’avance

    • Salut

      Tu dois mettre la balise dans les squelettes exactement où tu veux voir le scroller ;)
      N’oublie pas de « Recalculer la page » une fois que la balise est écrite (sinon SPIP te ressort sa version en cache de la page).

      P.

    • [(#REM) Entete de la page + titre du site ] [(#REM) Contenu principal : derniers articles publies ]
      [
      (#DESCRIPTIF_SITE_SPIP)
      ] #JS_SCROLLER{600,20,breves,1,150,ltr,''} [(#REM) Derniers articles ] [(#REM) Breves ] [(#REM) Liens des forums ] [(#REM) Sur le Web ]
      [(#REM) Menu de navigation laterale ] [(#REM) Menu de navigation laterale ]
      [(#REM) Inscription au site ] #FORMULAIRE_INSCRIPTION
      [(#REM) Pied de page ]
    • Salut,

      Je ne comprends pas bien d’où ça vient ...

      En fait le scroller fonctionne, pour preuve : http://www.ecolehenrichalland.fr/sp..., mais avec ton squelette, ça ne fonctionne plus : http://www.ecolehenrichalland.fr/sp... ...

      Tu as une erreur de syntaxe Javascript sur tes pages ... peut-être que c’est ça ? (cf. le document joint pour plus d’info)

      $("#g1").jFlip(,,{background:"",cornersTop:,scale:""});

      Essaie de corriger ça et si ça ne marche toujours pas, il va falloir trouver ... L’extension Firebug pour FIrefox peut probablement t’aider.

      Courage et patience :)
      P.

    • Merci je vais regarder...

    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