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

  • christianD.

    Bonjour,

    Super plugin et qui fonctionne parfaitement sous spip 2.1.2.

    Juste une question. J’aurai voulu qu’il fonctionne pour les articles et les brèves contenant un mot clé spécifique, id_mot=xx .

    On peut le faire?

    Reply to this message

  • 5

    bonjour,
    Et pour les langue qui s’écrient de droite a gauche, comment changer la direction du deffilement.

    • Question intéressante !

      J’ai ajouté l’argument ’direction’ à la balise ... ’Suffit de demander ;-)

      Le zip de cette page est mis à jour (version du plugin 1.2).

      - non testé sur Internet Explorer
      -  OK sur Opéra, Safari et Firefox

    • Merci infiniment.
      je vais le tester et vous répondre s’il existe des bugs ou non.

    • Fatal error: Call to undefined function js_scroller_get_js() in /home/dinebout/public_html/pwwo/plugins/js_scroller/js_scroller/balise/js_scroller.php on line 51

      je ne sais pourkoi il me donne cette erreur et la barre n’apparait pas, et cela quand je change a une langue rtl comme l’arabe.

    • j’ajoute la ligne de mon code
      #JS_SCROLLER600,20,articles,20,40,#LANG_DIR

    • ?? je ne vois pas du tout d’où peut venir cette erreur ... elle signifie que SPIP ne charge pas le fichier de fonctions du plugin.
      Quelle version de SPIP sur le site ?

      Solution d’appoint
      Dans le fichier “js_scroller/balise/js_scroller.php”, après la ligne 16 :

      function balise_js_scroller_dyn($width='600', $height='20', $type='articles', $max='50', $cut='40', $dir='ltr') {        // (ligne 16)

      ajouter la ligne suivante :

      include_spip('js_scroller_fonctions');        // (nouvelle ligne 17)

      Pour rappel, les fichiers PHP peuvent s’éditer avec n’importe quel utilitaire de texte type bloc-note (tout système d’exploitation en a un par défaut qui suffit amplement - ne pas changer l’encodage si c’est proposé).

    Reply to this message

  • 1

    Merci pour le plugin, ça serait intéressant de le faire se stopper par moment, afin que l’internaute puisse lire l’information correctement.

    • C’est un peu compliqué à réaliser ... mais si tu trouves une astuce, je suis preneur.

      Le défilement s’arrête ’onMouseOver’ et tu peux régler la vitesse. En attendant mieux ...

    Reply to this message

  • 1

    Bonjour,

    c’est vrai que ce plugin est très sympas et très facile d’utilisation pour une débutante comme moi,
    Par contre je n’arrive pas à trouver ou changer le titre qui s’affiche au début : “titre bandeau articles”
    Pouvez vous m’aider??

    Merci d’avance

    • Merci pour lui ;-)

      Pour modifier les titres, il faut éditer directement le fichier de langue du plugin : ’racine_js_scroller/lang/js_scroller_fr.php’ (de mémoire, chemin à vérifier ...) et modifier les lignes ’titre_bandeau_...’.

      Pour inclure le nombre d’entrées de la liste dans le titre, utiliser le raccourci ’@counter@’ dans les chaînes.

    Reply to this message

  • bonjour,

    a noter que le script n’est pas accessible car il n’est pas possible de stopper le défilement à l’aide du clavier. Il faudrait un bouton play/pause utilisable au clavier.

    Reply to this message

  • Il déglingue ton plugin : Super boulot !

    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