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 1.0 - 28/7/2017 license GNU/GPLv3 credit script JS limarquee de omcg33
  • marquee: le texte de l'etiquette
  • 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 = false: true = 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 = true: mode carousel. si contenu plus large que .str_wrap
  • drag = true: deplacement msg avec souris
  • runshort = true: scroll si texte court (visible sans scroll)
  • hoverstop = true: pause lors survol
  • inverthover = false: 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. Ut in geometria, prima si dederis, danda sunt omnia. Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. At ego quem huic anteponam non audeo dicere; Illum mallem levares, quo optimum atque humanissimum virum, Cn. Duo Reges: constructio interrete.

    Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Quod autem ratione actum est, id officium appellamus. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Si enim ita est, vide ne facinus facias, cum mori suadeas. Sed haec omittamus; Sic enim censent, oportunitatis esse beate vivere. Sed haec nihil sane ad rem;

    Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Illud mihi a te nimium festinanter dictum videtur, sapientis omnis esse semper beatos; Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Dolere malum est: in crucem qui agitur, beatus esse non potest. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam.

    Quid est, quod ab ea absolvi et perfici debeat? Sed quod proximum fuit non vidit. Videmus igitur ut conquiescere ne infantes quidem possint. Aliter homines, aliter philosophos loqui putas oportere? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Nam de isto magna dissensio est. Sed quia studebat laudi et dignitati, multum in virtute processerat. Nos vero, inquit ille; Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Sit enim idem caecus, debilis. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Cur, nisi quod turpis oratio est? Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Duo Reges: constructio interrete.

    Utilitatis causa amicitia est quaesita. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Tum ille: Ain tandem? Cui Tubuli nomen odio non est? Nemo nostrum istius generis asotos iucunde putat vivere.

    Quis non odit sordidos, vanos, leves, futtiles? Quis est, qui non oderit libidinosam, protervam adolescentiam? Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Cupiditates non Epicuri divisione finiebat, sed sua satietate. Quo igitur, inquit, modo? Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Stoicos roga. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Quod vestri non item.

    Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Sed ad haec, nisi molestum est, habeo quae velim. Eadem fortitudinis ratio reperietur.

    • Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia?
    • Quis enim est, qui non videat haec esse in natura rerum tria?
    • Quae autem natura suae primae institutionis oblita est?
    • Dic in quovis conventu te omnia facere, ne doleas.

    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/lmup/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.

    Mes
    extensions
    Joomla!
    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}