marquee ~ du contenu défilant

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 - 28/7/2017 license GNU/GPLv3 credit script JS limarquee de omcg33 tags layout-dynamic
  • marquee: le texte de l'etiquette
  • filter: conditions. Voir doc action filter (v1.8)
  • height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
  • model = base: style CSS dans .upmq-*style*. aucun=none
  • 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 = 0: 1 = label sur une ligne
  • direction = left: right, up, down
  • loop = -1: nombre d'affichage, -1 : infini
  • scrolldelay = 0: 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 = 0: 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. Sin laboramus, quis est, qui alienae modum statuat industriae? Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque arripuit, interficit. Tu enim ista lenius, hic Stoicorum more nos vexat. Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Duo Reges: constructio interrete. Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Ut id aliis narrare gestiant? Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere.

    Summus dolor plures dies manere non potest? Quo plebiscito decreta a senatu est consuli quaestio Cn. Negat esse eam, inquit, propter se expetendam. Neque solum ea communia, verum etiam paria esse dixerunt. Sed haec quidem liberius ab eo dicuntur et saepius. Nunc de hominis summo bono quaeritur; Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis; Duae sunt enim res quoque, ne tu verba solum putes.

    Nunc omni virtuti vitium contrario nomine opponitur. An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Graece donan, Latine voluptatem vocant. Sine ea igitur iucunde negat posse se vivere? Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.

    Quorum altera prosunt, nocent altera. Ergo hoc quidem apparet, nos ad agendum esse natos. Quantum Aristoxeni ingenium consumptum videmus in musicis? Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Suo enim quisque studio maxime ducitur.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost; Quod non subducta utilitatis ratione effici solet, sed ipsum a se oritur et sua sponte nascitur. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Sed plane dicit quod intellegit. Dici enim nihil potest verius. Duo Reges: constructio interrete. Videamus animi partes, quarum est conspectus illustrior; Quid iudicant sensus? Non dolere, inquam, istud quam vim habeat postea videro;

    Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Bestiarum vero nullum iudicium puto. Quod autem ratione actum est, id officium appellamus. Bestiarum vero nullum iudicium puto. Quod autem ratione actum est, id officium appellamus. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Satisne ergo pudori consulat, si quis sine teste libidini pareat? Quae in controversiam veniunt, de iis, si placet, disseramus. At habetur! Et ego id scilicet nesciebam! Sed ut sit, etiamne post mortem coletur?

    • Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur.
    • Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.
    • Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus;
    • Ego vero isti, inquam, permitto.

    Quamquam id quidem licebit iis existimare, qui legerint. Sin laboramus, quis est, qui alienae modum statuat industriae? Idem fecisset Epicurus, si sententiam hanc, quae nunc Hieronymi est, coniunxisset cum Aristippi vetere sententia. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Falli igitur possumus. Semovenda est igitur voluptas, non solum ut recta sequamini, sed etiam ut loqui deceat frugaliter. At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros.

    Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Negare non possum. Non est ista, inquam, Piso, magna dissensio. Quo modo autem philosophus loquitur? Age sane, inquam. De illis, cum volemus. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur?

    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-PrismCustomCSSLM-MasonryJViewerJSContentlistLM-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