marquee
Décrié, mais pratique et demandé, une action pour mettre du texte défilant dans vos articles

Sur un script de script JS limarquee de omcg33 (licence MIT)

🆙 marquee : contenu HTML défilant horizontalement ou verticalement

Cliquer pour lire la documentation

{up marquee=label} texte du message défilant {/up marquee} *
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: script JS limarquee de omcg33 @tags: layout-dynamic
  • marquee: le texte de l'etiquette
  • model = base: style CSS dans .upmq-*style*. 0=aucun
  • height (h,hauteur) = 100px: hauteur defaut pour scroll vetical

Style CSS

  • out-class: classe(s) pour div out
  • out-style: style inline pour div out
  • msg-class: classe(s) pour div msg
  • msg-style: style inline pour div msg
  • lbl-class: classe(s) pour div label
  • lbl-style: style inline pour div label
  • lbl-pos: position label : left, right, top, bottom, none
  • lbl-nowrap: 1 = label sur une ligne

Divers

  • id: identifiant
  • filter: conditions. Voir doc action filter (v1.8)

Paramètres Javascript pour configuration

  • direction = left: right, up, down
  • loop = - 1: nombre d'affichage, -1 : infini
  • scrolldelay: delai en millisecondes
  • scrollamount = 50: vitesse
  • circular = 1: mode carousel. si contenu plus large que .str_wrap
  • drag = 1: deplacement msg avec souris
  • runshort = 1: scroll si texte court (visible sans scroll)
  • hoverstop = 1: pause lors survol
  • inverthover: scroll uniquement lors survol

Syntaxe minimale

{up marquee}le texte défilant{/up marquee}
le texte défilant

Les modèles fournis avec le plugin

info-img

{up marquee | model=info-img | lbl-pos=left }
  <strong style="font-size:24px">le texte défilant</strong>
{/up marquee}

Attention: pour afficher la zone label en l'absence d'un titre, il faut indiquer sa position par lbl-pos

le texte défilant

info

{up marquee=infos | lbl-pos=right | model=info | lbl-style=color:yellow}le texte défilant{/up marquee}
le texte défilant
infos

ok

{up marquee=infos| lbl-pos=right | model=ok | lbl-style=color:yellow}
  <strong style="color: red;">le texte défilant</strong>
{/up marquee}
le texte défilant
infos

cahier

{up marquee=une demo de défilement vertical | direction=up 
  | model=cahier | inverthover 
  | H=300px | lbl-nowrap | circular=0 
  | out-class=ombre 
  | out-style=border:#aaa 1px solid; margin-top:10px
}
<p>{up lorem}</p>
<p>{up lorempixel=cats | h=100 | L=800}</p>
<p>{up lorem=decorate,link,ul}</p>
{/up marquee}

inverthover fait que le texte défile uniquement lors du survol par la souris. lbl-nowrap empêche les retours à la ligne pour le libellé

une demo de défilement vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. At enim hic etiam dolore. De ingenio eius in his disputationibus, non de moribus quaeritur. Duo Reges: constructio interrete. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Indicant pueri, in quibus ut in speculis natura cernitur. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque arripuit, interficit.

Hos contra singulos dici est melius. Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit. Respondeat totidem verbis. Vide, quantum, inquam, fallare, Torquate. Voluptatem cum summum bonum diceret, primum in eo ipso parum vidit, deinde hoc quoque alienum; Bork Quid de Platone aut de Democrito loquar?

At ego quem huic anteponam non audeo dicere; Idemne potest esse dies saepius, qui semel fuit? Atqui, inquam, Cato, si istud optinueris, traducas me ad te totum licebit. Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit. Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Ita ne hoc quidem modo paria peccata sunt. Serpere anguiculos, nare anaticulas, evolare merulas, cornibus uti videmus boves, nepas aculeis. Age sane, inquam. Hanc ergo intuens debet institutum illud quasi signum absolvere. Vestri haec verecundius, illi fortasse constantius. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Duo Reges: constructio interrete.

  • Huius, Lyco, oratione locuples, rebus ipsis ielunior.
  • Expectoque quid ad id, quod quaerebam, respondeas.
  • Quamquam te quidem video minime esse deterritum.
  • Vide igitur ne non debeas verbis nostris uti, sententiis tuis.

Nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit. Cur id non ita fit? Quid ad utilitatem tantae pecuniae? Quo studio cum satiari non possint, omnium ceterarum rerum obliti níhil abiectum, nihil humile cogitant; At enim hic etiam dolore. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Ut aliquid scire se gaudeant? Nihil enim iam habes, quod ad corpus referas;

Cur post Tarentum ad Archytam? Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quid me istud rogas? Videsne quam sit magna dissensio? Non est ista, inquam, Piso, magna dissensio. Quamquam id quidem, infinitum est in hac urbe; Aliter enim nosmet ipsos nosse non possumus. Neque solum ea communia, verum etiam paria esse dixerunt. Tuum credibile?

promo

{ up marquee | model=promo| <span style="color: #800000;">lbl-pos=left</span>}le texte défilant{ /up marquee}
le texte défilant

Vous pouvez très facilement créer vos modèles en vous inspirant des fichiers css dans /plugins/content/up/actions/marquee/styles

Un bandeau déroulant de logos

Cet exemple correspond à un besoin courant: les logos des sponsors. Il est fait sans modèle, juste quelques options pour l'action Marquee.

{up marquee=<img src="/images/admin/joomla-logo-32.png" width="32px" height="32px"><br>Mes<br>extensions<br>Joomla! 
| lbl-pos=left | height=100px
| out-style=border:2px #069 solid 
| lbl-style=background-color:#069;color:#FFF;font-size:12px;padding:0 10px 
| msg-style=padding:0}
<div style="height:100px">
<a href="http://lomart.fr/extensions/adminorder" target="_blank"><img src="/images/logo-lomart/logo-adminorder.png" alt="adminorder" title="Ordre de tri par défaut des tables articles, plugins, modules et extensions." height="100px" width="100px"></a><!--
--><a href="http://lomart.fr/extensions/bgmax" target="_blank"><img src="/images/logo-lomart/logo-bgmax.png" alt="bgmax" title="Facilite la mise en place d'une image de fond pour votre site." width="100px"></a>
</div>
{/up marquee}

J'ai surligné dans le code, les difficultés rencontrées.

  • Il faut préciser la hauteur des images à la fois pour le script JS, mais également mettre toutes les images dans un bloc avec la hauteur définie. Cela a pour but de réserver la place tant que les images ne sont pas en cache.
  • Il faut également que toutes les images soient sur une seule ligne de code pour éviter les espaces entre-elles. Ce problème classique du HTML est résolu en mettant un commentaire pour simuler le saut de ligne.
MesextensionsJoomla!
adminorderbgmaxLM-PrismCustomCSSJViewerJSContentlistLM-MailModifArtPlugLM-FilterLM-CustomLM-MemoLM-MetaDataLM-ProverbLM-ZoomSCSS-Compiler

Contenu défilant avec des images

Si le texte défilant contient des images, il se peut que la hauteur soit mal calculée car l'image n'est pas encore chargée

Il va falloir user de 2 astuces pour s'en prémunir :

  1. Ajouter un espace de grande taille pour forcer la hauteur de la ligne : <b style="font-size:42px"> </b>
  2. justifier verticalement l'image : style="vertical-align:bottom"

Le code complet avec les 2 astuces surlignées

{up marquee=TEXTE AVEC IMAGE | model=info | lbl-nowrap=1}
<b style="font-size:66px"> </b><strong style="font-size: 16px; color: #be0d34;">Des idées de cadeaux ! 
<img src="/images/icon/rond-rouge.gif" alt="Idées de cadeaux de fin d'année" title="Image cadeau"  style="vertical-align:bottom">
</strong>
{/up marquee}

TEXTE AVEC IMAGE
Des idées de cadeaux ! Idées de cadeaux de fin d'année

On y arrive aussi en fixant un line-height dans le style du texte

<b>{</b>/up marquee<b>}</b></code></pre>
{up marquee=TEXTE AVEC IMAGE | model=info | lbl-nowrap=1}
<strong style="font-size: 16px; line-height:60px; color: #be0d34;">Des idées de cadeaux ! 
<img src="/images/icon/rond-rouge.gif" alt="Idées de cadeaux de fin d'année" title="Image cadeau"  style="vertical-align:middle">
</strong>
{/up marquee}

version 1.8

Pour info, cette page utilise 16 action(s) :
marquee (9) upactionslist (1) lorem (2) lorempixel (1) readmore (1) modal (1) jcontent-info (1)