Module Compatible Joomla 3.x Joomla 4 Joomla 4 Anglais Français

Description

LM-Marquee
Le bandeau défilant ou marquee est une fonctionnalité décriée, mais très pratique pour mettre en avant une information ou afficher la liste de sponsors.

J'ai écrit ce module pour qu'il soit à la fois facile à mettre à jour par un rédacteur à l'aide d'un éditeur Wisywyg, mais également facilement configurable en CSS par le webmaster.

Ce module utilise le script JS limarquee de omcg33, dont les points forts sont:

  • défilement dans les 4 directions (gauche, droite, haut, bas)
  • responsive et tactile
  • pause lors survol
  • déplacement du texte à la souris
  • mode continu
  • support du HTML

Ce plugin n'évoluera plus.
L'action marquee du plugin universel UP prend la relève

Démonstration

Nos
infos

Exemple avec le style "INFO", cool
tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

Bravo


Mes
extensions
Joomla!
adminorderbgmaxLM-PrismCustomCSSLM-MasonryJViewerJSContentlistLM-MailModifArtPlugLM-FilterLM-CustomLM-MemoLM-MetaDataLM-ProverbLM-ZoomSCSS-Compiler

C'est un peu voyant, mais cela permet de démontrer les possibilités. Ici le style met un gif comme background de l'étiquette

Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Maecenas mattis. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.
  • item N° 001
  • item N° 002
  • item N° 003
  • item N° 004
  • item N° 005
  • item N° 006

Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Ut fringilla. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.

Notes
15/20

Configuration

Une fois téléchargé et installé comme tous les modules, il faut le publier et lui assigner une position. Il est possible d'avoir plusieurs modules sur une même page.

Onglet "Module"

Une fois le style du module paramétré par le webmaster, les données à actualiser par les rédacteurs sont regroupées dans cet onglet.

les copies d'écran montrent la configuration pour l'exemple ci-dessous avec les logos de mes extensions. L'éditeur est rokpad, mais pourrait très bien être JCE ou TinyMCE

  • Etiquette: Le texte qui sera affiché comme titre de la zone défilante. Vous pouvez saisir du code HTML. Exemple: Mot en <span style="color:red">rouge</span>
  • Message défilant: Texte qui sera sera affiché dans la zone défilante. Vous pouvez saisir du code HTML. La hauteur du message défilant est:
    • calculée automatiquement dans le cas d'un défilement horizontal
    • définie dans l'onglet "Message" pour un défilement vertical
    L'éditeur utilisé est celui en cours dans Joomla!'
  • Plugin de contenu: mettre sur oui pour utiliser la prise en charge des modules de contenu (exemple: loadposition)
LM-Marquee - configuration onglet module

Onglet "Style"

Cet onglet permet de définir l'aspect graphique du bandeau déroulant.

  • Style: Le nom du fichier CSS utilisé pour la présentation du message. Le webmaster peut créer plusieurs styles qu'il suffira de sélectionner pour l'utiliser. Voir ci-dessous pour la création de style.
  • Position étiquette: Emplacement de la zone titre, indépendamment du sens de défilement.
  • Etiquette sur une ligne: Oui: le texte de l'étiquette sera sur une seule ligne. Un passage à la ligne sera fait en insérant la balise <br>
    Non: la largeur du bloc sera celle du mot le plus long. Les autres mots occupent la place au mieux.
  • CSS général: Propriété(s) CSS à appliquer au conteneur principal du message (classe lmmq-out). Exemple: background-color:lightyellow; border:#333 2px solid
  • CSS pour étiquette: Propriété(s) CSS à appliquer au conteneur de l'étiquette (classe lmmq-lbl). Exemple: color:yellow
  • CSS pour message: Propriété(s) CSS à appliquer au message (classe lmmq-msg). Exemple: padding-left:25px

NOTE: il est nécessaire d'avoir une connaissance sommaire du langage CSS pour remplir ces 3 derniers champs. Toutefois, cela permet beaucoup plus de liberté au webmaster responsable du design du site.

LM-Marquee - configuration onglet style

Onglet "Message"

Cet onglet permet de définir le comportement du message défilant

  • Défilement: Le sens de défilement du message : de droite à gauche, de gauche à droite, vers le haut ou vers le bas.
  • Hauteur défilement vertical: Pour un défilement vertical, il est nécessaire d'indiquer la hauteur de la zone en pixels (150px) ou en pourcentage du conteneur parent (100%)
  • Pause lors survol: Oui: le défilement s'arrête lors du survol de la zone par la souris.
  • Défilement lors survol: Oui: le texte défile uniquement lorsque la zone est survolée par la souris.
  • Défilement si texte court: Oui: le texte va défiler même si sa longueur permet de l'afficher intégralement.
  • Déplacement avec souris: Oui: vous pouvez déplacer le contenu défilant à l'aide de la souris
  • Mode carousel (continu): Oui: si le contenu est suffisant pour remplir la zone du message, le contenu sera continu.
    Non: le message défilant sera ré-affiché uniquement lorsque le message actuel aura disparu.
  • Nombre de boucles: Nombre de passages du message défilant. -1 = infini
  • Delai avant départ: Délai en millisecondes avant le défilement du message.
  • Vitesse: Vitesse de défilement.
LM-Marquee - configuration onglet message

Création d'un style

Un des atouts de ce module est de permettre la création d'une feuille de styles CSS qui sera automatiquement ajoutée dans la liste des styles

Pour créer un nouveau style, il suffit de créer un nouveau fichier dans le dossier /modules/mod_lmmarquee/style.

le nom des sélecteurs

Le nom du fichier est le nom du style. Pour éviter un conflit avec d'autres styles chargés sur la même page, il est conseillé de mettre l'identifiant du style comme premier sélecteur.

Le module affecte une classe au bloc principal dont le nom est composé de "lmmq-" + "nomdustyle"
Exemple : pour le fichier info.css, le nom de la classe sera : lmmq-info

sélecteur commentaire
.lmmq-info .lmmq-out le bloc principal
.lmmq-info .lmmq-lbl le bloc de l'étiquette
.lmmq-info .lmmq-lbl > div le texte de l'étiquette pour, par exemple, appliquer un transform:rotate()
.lmmq-info .lmmq-msg le bloc contenant le message défilant.

Structure du code généré

le nom de toutes les classes de LM-Marquee est préfixé par lmmq-

<!-- LE BLOC PRINCIPAL avec l'ID unique et le nom du style -->
<div id="lmmq-93" class="lmmq-info">
  <!-- LE BLOC EXTERNE (outer) avec la position de l'étiquette
      note: [class*="lmmq-h"] permet de cible les étiquettes gauche et droite
      suivi du style indiqué dans les paramètres  -->
  <div class="lmmq-out lmmq-h-left" style="background-color:lightyellow">
    <!-- LE BLOC ETIQUETTE -->
    <div class="lmmq-lbl" style="color:yellow">
      <!-- LE TEXTE DE L'ETIQUETTE -->
      <div>TEXTE ETIQUETTE</div>
    </div>
    <!-- LE BLOC DU MESSAGE DEFILANT -->
    <div class="lmmq-msg" style="padding-left:25px">
      <!-- GERE PAR LE SCRIPT JS -->
    </div>
  </div>
</div>

Attention: si vous modifiez un des styles fournis avec le module, je vous conseille de le renommer pour éviter qu'il soit écrasé à la prochaine mise à jour.

Téléchargement Compatible Joomla 4 Joomla 4

Support

Vous pouvez utiliser le formulaire de contact

Print Friendly and PDF