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, up, down, 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. Si verbum sequimur, primum longius verbum praepositum quam bonum. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Duo Reges: constructio interrete. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quorum sine causa fieri nihil putandum est. Idcirco enim non desideraret, quia, quod dolore caret, id in voluptate est.

    Etsi qui potest intellegi aut cogitari esse aliquod animal, quod se oderit? Itaque ab his ordiamur. Negat enim summo bono afferre incrementum diem. Quod quidem iam fit etiam in Academia. Ita prorsus, inquam; Sed haec quidem liberius ab eo dicuntur et saepius. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Respondent extrema primis, media utrisque, omnia omnibus. Dicimus aliquem hilare vivere; Ac tamen, ne cui loco non videatur esse responsum, pauca etiam nunc dicam ad reliquam orationem tuam.

    Claudii libidini, qui tum erat summo ne imperio, dederetur. Ut id aliis narrare gestiant? Haec non erant eius, qui innumerabilis mundos infinitasque regiones, quarum nulla esset ora, nulla extremitas, mente peragravisset. Ait enim se, si uratur, Quam hoc suave! dicturum. Nihil opus est exemplis hoc facere longius. Quibus ego vehementer assentior. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Rationis enim perfectio est virtus; Aeque enim contingit omnibus fidibus, ut incontentae sint. Ait enim se, si uratur, Quam hoc suave! dicturum.

    Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Sed quot homines, tot sententiae; Quo modo autem optimum, si bonum praeterea nullum est? Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt? At habetur! Et ego id scilicet nesciebam! Sed ut sit, etiamne post mortem coletur? Qui potest igitur habitare in beata vita summi mali metus? Nam Pyrrho, Aristo, Erillus iam diu abiecti. Primum Theophrasti, Strato, physicum se voluit;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc loco tenere se Triarius non potuit. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Duo Reges: constructio interrete. Sed ego in hoc resisto; Quippe: habes enim a rhetoribus; Compensabatur, inquit, cum summis doloribus laetitia. Nunc haec primum fortasse audientis servire debemus. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.

    • Fortasse id optimum, sed ubi illud: Plus semper voluptatis?
    • Septem autem illi non suo, sed populorum suffragio omnium nominati sunt.
    • Ergo illi intellegunt quid Epicurus dicat, ego non intellego?
    • Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers?
    • Si quicquam extra virtutem habeatur in bonis.
    • Vitiosum est enim in dividendo partem in genere numerare.

    Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Nosti, credo, illud: Nemo pius est, qui pietatem-; Nulla profecto est, quin suam vim retineat a primo ad extremum.

    Sic enim censent, oportunitatis esse beate vivere. An eiusdem modi? Graece donan, Latine voluptatem vocant. Avaritiamne minuis? Respondeat totidem verbis. Recte dicis; Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Quamquam tu hanc copiosiorem etiam soles dicere.

    Negat esse eam, inquit, propter se expetendam. Unum est sine dolore esse, alterum cum voluptate. Rationis enim perfectio est virtus; Ne in odium veniam, si amicum destitero tueri. Nos vero, inquit ille; Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Si longus, levis; Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine;

    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}