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}}</BOUCLE>[(#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>
]</B>

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 :

Footnotes

[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

    Bonjour Piero

    1. Petit constat d’importance mineur: Lorsque le plugin “entravaux” est actif et que le site est mis en maintenance, JS_SCROLLER n’affiche plus rien. Lorsqu’on décoche la maintenance, tout va bien. Je n’ai pas encore essayé avec la variante équivalente dans le Couteau Suisse.

    2. Suis un parfait débutant et je n’arrive pas à activer la doc de votre plugin. Mon site tourne sous Spip3.

    Cordialement
    blonchk

    • Salut Blonchk,

      Effectivement, je n’avais jamais testé mais le plugin ne peut pas récupérer la liste des objets SPIP quand il est “en travaux” (autant avec le plugin qu’avec la lame du couteau suisse). C’est une limite de la fonction interne de SPIP pour récupérer un contenu XML ...

      Concernant la doc, il n’y a normalement rien à activer. Tu cliques sur le lien et c’est parti :)
      Au pire, tu peux charger l’URL à la main :

      http://ton_site/spip.php?page=js_scroller_documentation

      @+
      P.

    • Merci pour ces précisions, Piero. Et également pour ce plugin fort sympathique et assez simple à personnaliser. La doc, ça joue aussi :)

      Cordialement
      b.

    Reply to this message

  • 1

    Bonjour,

    Je débute en spip et je souhaite faire défiler le texte d’un article pour mettre en valeur une information. Si j’ai bien compris ma balise doit être :
    #JS_SCROLLER{'' , '' , article126 }

    Ma question de débutant est tout bête : où dois-je place cette balise ? Ou bien est-ce une balise déjà existante que je dois modifier ?

    Merci par avance !

    Cédric

    • Salut Cédric,

      Désolé j’ai laissé passer ton message (je fais un petit ménage et du coup ...).

      As-tu trouvé ton bonheur concernant la balise ?
      En fait il faut la mettre littéralement où tu veux voir la bannière, tout bêtement.

      N’hésite pas à reposter si problème.
      @+
      P.

    Reply to this message

  • 1

    Bonjour,
    Je suis confrontée à une énigme. Ce plugin ne fonctionne pas correctement chez moi : l’appel se fait bien puisque je vois défiler le titre perso que j’ai entré mais rien ne suit, ni article, ni brève, ni quoique ce soit d’autre.
    Je suis sous spip 3.0.3 avec la dernière version du plugin présente sur cette page.

    Les plugins activés :

    Accès Restreint - 3.6.2 - stable
    Javascript Scroller - 1.44.1 - stable
    Menu babbibel - 3.0 - stable
    Menus - 1.2.3 - dev
    Saisies pour formulaires - 1.26.1 - test
    Squelette par mot clef - 3.1.0 - stable

    J’ai essayé de remettre le jeu de squelettes de la dist sans changement.
    J’ai également remplacé le inclure/head personnalisé par mes soins par celui livré par défaut, pas de changement.

    Ça se passe ici par exemple.
    Merci d’avance pour votre aide.

    • Et bien j’ai ma réponse ! C’est le plugin Accès Restreint qui empêchait le bon appel des items.
      pourquoi ? Mystère et boule de gomme !!

    Reply to this message

  • 1

    beuh voila ma balise :
    #JS_SCROLLER",100,documents

    Quand je charge mon site, après 4/5 secondes, le bandeau affiche “les 4 derniers articles ajoutés ....”

    Qqun aurait une idée ?

    • Salut “?”,

      J’ai besoin de plus d’infos pour répondre clairement :
      -  version de SPIP ?
      -  version du plugin ?
      -  as-tu bien des documents enregistrés (si oui combien et lesquels) ?
      -  tu dis “4/5 secondes”, avant il n’y a rien ? sinon quoi ?

      ... à partir de là, je pourrai te répondre (peut-être ;-).

      PiWi

    Reply to this message

  • 5
    Locks971

    Bonjour,
    J’ai galéré un moment avant de trouver ce plugin qui répond exactement à ce que je cherchais.
    J’aurais voulu avoir une précision concernant le lien qui semble être obligatoire, mais je voudrais faire défiler sur mon site des infos non cliquables.
    Est il possible de désactiver le lien?
    Encore merci pour ce plugin!!!

    • Salut,

      là ça va être compliqué ... si tu es développeur PHP (ou que tu as un peu de connaissance en la matière), il faut revoir le code de la balise (elle génère automatiquement la suite de liens).

      Il faut éditer le fichier ’balise/js_scroller.php’ et modifier le code à partir de la ligne 66 en enlevant la balise “<a ...>” (tu peux tout simplement la remplacer par “span” et retirer l’attribut “href”).

      Si tu galères, je peux te donner un coup de main d’ici la fin de semaine, tiens moi au courant.

      ++

    • Bon allez, c’est offert par la maison : http://trac.pierowbmstr.fr/p/Plugin....

      éh hop ;-)

    • Bonjour Pierre,

      Le lien pour télécharger la version alternative du script (sans lien) est mort.
      Si jamais tu as toujours ce fichier quelque part, cette option m’arrangerait bien.

      D’avance merci

      Nat33

    • Bonjour Nathalie,

      Je l’ai ajouté dans le dépôt, le code est accessible à cette adresse : http://trac.pierowbmstr.fr/p/Plugin... (lien de téléchargement en bas de page).

      @+
      PiWi

    • Merci beaucoup Pierre c’est nickel :)
      Nat33

    Reply to this message

  • Locks971

    Merci pour la réponse ultra rapide.
    Les explications sont simples et ça marche nickel !
    Et le tout sans aucune connaissance en Php en ce qui me concerne.
    Encore mille merci!!

    Reply to this message

  • 2

    Autre question, en marge du problème précédent, concernant les valeurs par défaut.

    * en réduisant la longueur d’ “item_separator” est-il possible d’accélérer un peu le défilement des logos des brèves concernées ?

    * la valeur par défaut de “speed” est “3” et il est signalé que modifier cette valeur doit se faire avec précaution ! Comment accélérer, un peu le défilement, en faisant varier ce paramètre ? A quoi correspond-il ? Dans le javascript proprement dit, cette valeur est reprise dans la fonction “ieslidew”, mais j’avoue ne pas voir comment elle conditionne la vitesse de défilement. Merci d’avance pour un petit peu d’aide.

    • Salut,

      la vitesse de défilement est bien la valeur de ’speed’, que l’on peut préciser en 8em argument de la balise (il n’est pas indiqué dans cette documentation).
      Le principe de cette valeur est simple : plus elle est élevée, plus la banderole défile rapidement. Sa valeur par défaut est “3” et elle peut prendre n’importe quelle valeur décimale notée avec un point, par exemple “4.2”. Vérifiez bien le rendu sur les différents navigateurs, j’ai cru déceler des sautes de défilement sur IE<7.

      La valeur de “item_separator” (9em argument de la balise) n’est que la chaîne HTML de séparation entre chaque entrée de boucle.

    • Merci pour ces compléments.
      Effectivement avec IE ..... il y a des “sautes”, même avec IE 8

    Reply to this message

  • 2

    (Je recopie ici un message envoyé directement à l’auteur. Je le remercie pour sa réponse par retour que je vais ajouter à ce post)

    Bonjour,

    Nous venons d’activer votre plugin sur notre site (www.anpei.org) afin de
    réaliser un badeau circulant des logos de nos annonceurs. Compte tenu de
    la structure de notre site, à chaque changement de page, le script reprend
    la séquence des logos au début. C’est le seul petit incovénient de votre
    superbe développement.
    Voyez-vous comment nous pourrions contourner cela et faire en sorte que de
    pages en pages ce soit l’ensemble de la séquence qui puisse être
    visualisée ?
    Par avance merci

    • (copie de la réponse de l’auteur)
      Bonjour,

      Il n’y a malheureusement, par défaut, pas de moyen de faire suivre le défilement de page en page .... Je vois deux solutions possibles :

      -  déposer un cookie en AJAX à chaque apparition d’image puis reprendre à chaque chargement de nouvelle page (un peu lourd à gérer)
      -  modifier la boucle générant la liste des documents affichés en ajoutant un critère “par hasard” ; cela génèrera une liste dans un ordre aléatoire, ce qui est je pense la meilleure solution.

      Pour cette deuxième solution, je vous renvoie à la section “Personnalisation” de la page de documentation du plugin sur SPIP-Contrib : http://www.spip-contrib.net/?article3570
      Le principe est simple :
      -  faites une copie du fichier “xml/scroller_items_documents.html” (renommez-le par exemple “scroller_items_documents_perso.html”),
      -  ajoutez dans la boucle le critère “par hasard
      -  puis indiquez le nom de ce nouveau fichier dans la balise JS_SCROLLER.

      En espérant que cela vous aide, n’hésitez pas à me recontacter en cas de problème.

    • Nous avons justement choisi ce plugin pour éviter les effets d’un affichage aléatoire !

      La solution du cookie en AJAX est effectivement assez lourde et nécessite de plonger au coeur du script .... Je vais me creuser les méninges, ou revoir la structure des pages du site (lourd à faire aussi).

      Si quelqu’un à des idées ... merci d’avance

    Reply to this message

  • Merci pour ce plugin très important, j’espère bien l’utiliser dans un site multilangue avec des langue qui s’ecrivent de droite a gauche (je sais que la version actuelle le fait) mais le probleme qui existe c’est que on ne peut pas choisir la langue ( sélectionner une seul langue, parce qu’il l’actuelle plugin défile les articles ou brèves .... dans toute les langue,),
    Donc une autre version pour site multilangue sera très intéressante, avec l’ajout par exemple d’un autre critère pour la langue ( défilement des articles, brèves.... de la langue choisie avec possibilité de ne pas saisie la langue, pour que le plugin affiche le défilement en toute les langue).
    une autre méthode peut réaliser ce que j’espère, c’est d’ajouter le critère de la langue dans la boucle, parce que c’est possible mais je crois qu’un autre balise sera meilleur solution.
    Merci pour ce plugin et bon courage

    Reply to this message

  • 9
    christianD.

    J’ai trouvé pour l’id_mot. Il faut aller dans le répertoire xml.

    Par contre, je n’arrive pas à enlever le “titre bandeau...”.

    • christianD.

      Encore moi.

      Ca marche bien en local mais en ligne, le titre et le début des articles ou brèves n’apparaissent pas. J’ai juste “titre bandeau...” qui défile.

      Une solution?

    • Salut Christian,

      je viens de mettre à jour le plugin avec possibilité de modifier le titre dans la balise (version 1.3).

      Pour ton problème d’affichage en ligne, as-tu vidé le cache ? recalculé la page ? Sinon, je ne vois pas ...

    • christianD.

      Salut Piero,

      Je vais tenter la V1.3 et je te tiens au courant. Pour la version en ligne, j’ai tout fait, vidé le cache, recalcul, même enlevé et remis... Je ne vois que “titre bandeau”. J’essaie aussi avec la V1.3.

    • Re-

      je veux bien que tu me tiennes au courant pour le problème d’affichage ... je ne comprends vraiment pas du tout d’où ça peut venir (et ça me tracasse je dois bien l’avouer ;-) ??

    • christianD.

      Piero,

      Pour le titre, si tu mets blanc, il reprend le titre par défaut. Pour que ça défile sans rien du tout devant, il faut mettre le signe “underscore”, le souligné.

      #JS_SCROLLER 982 , 20 , articles , 10 , 100 , ltr , _

      Je n’ai touché à rien d’autre et pourtant en local, le titre apparait bien mais pas la suite du texte. Je comprends pas. J’ai pourtant effacé tout le répertoire, ré-installé... Je n’ai pas la suite de l’article, coupé à 100.

      Pour le site en ligne, c’est comme si rien n’était présent. Comme j’ai mis le signe “underscore”, je ne vois pas le début du défilement, mais je ne vois pas non plus le titre. On voit pourtant bien le border de ton plugin et que j’ai laissé. Le site est là http://www.asso-scooter.org/

    • ReRe-

      Tu as tout à fait raison pour le titre, erreur de ma part en faisant la doc : en fait il faut indiquer ’non’ en dernier argument de balise pour ne pas avoir de titre.

      Par contre je n’ai pas vu le scroller sur ton site (j’ai fait un peu toutes les pages et pas de scroller, et la page de doc “js_scroller_documentation” est introuvable ??). Tu l’as désinstallé ?

      Mais, j’ai pu voir que ta page d’accueil avait une belle erreur de code : deux fermetures de boucles qui ne doivent pas être ouvertes (cf. image jointe ;-)

    • Oui, je l’ai désinstallé car en l’état, le scroller génère une erreur qui bloque les pages. Je pensais te l’avoir envoyé mais apparemment, mon message n’est pas parti.

      Merci pour les fermetures de boucles, je vais regarder ce soir. Oups, pas ce soir. Demain :-).

    • christianD.

      Finalement, corrigé les fermetures de boucles ce matin.

      Je vais essayer de te générer ce soir l’erreur que j’ai sur le site.

    • christianD.

      Bonjour Piero,

      CA MARCHE !!!

      Un grand merci pour tout et Joyeux Noël !

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom