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
  • 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 = 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. Cur igitur, cum de re conveniat, non malumus usitate loqui? At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Vitiosum est enim in dividendo partem in genere numerare. Verba tu fingas et ea dicas, quae non sentias? De ingenio eius in his disputationibus, non de moribus quaeritur. Duo Reges: constructio interrete.

    Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia. Tria genera bonorum; Quae in controversiam veniunt, de iis, si placet, disseramus. Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Quos nisi redarguimus, omnis virtus, omne decus, omnis vera laus deserenda est. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quid enim possumus hoc agere divinius?

    Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Non quam nostram quidem, inquit Pomponius iocans; At ille pellit, qui permulcet sensum voluptate. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Si mala non sunt, iacet omnis ratio Peripateticorum.

    Illum mallem levares, quo optimum atque humanissimum virum, Cn. Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Hoc loco discipulos quaerere videtur, ut, qui asoti esse velint, philosophi ante fiant. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Egone non intellego, quid sit don Graece, Latine voluptas? Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Apparet statim, quae sint officia, quae actiones. Quod vestri non item. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Nos vero, inquit ille; Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Quando enim Socrates, qui parens philosophiae iure dici potest, quicquam tale fecit? Duo Reges: constructio interrete.

    • Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
    • Tamen a proposito, inquam, aberramus.
    • Videamus igitur sententias eorum, tum ad verba redeamus.
    • Haec para/doca illi, nos admirabilia dicamus.
    • Aliena dixit in physicis nec ea ipsa, quae tibi probarentur;
    • Si enim ita est, vide ne facinus facias, cum mori suadeas.

    Utrum igitur tibi litteram videor an totas paginas commovere? Quis istud possit, inquit, negare? Conferam tecum, quam cuique verso rem subicias; Nos autem non solum beatae vitae istam esse oblectationem videmus, sed etiam levamentum miseriarum. Item de contrariis, a quibus ad genera formasque generum venerunt. Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque arripuit, interficit. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Sin aliud quid voles, postea.

    Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Nos paucis ad haec additis finem faciamus aliquando; Quonam, inquit, modo? Est enim effectrix multarum et magnarum voluptatum. Hanc quoque iucunditatem, si vis, transfer in animum; Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Si quidem, inquit, tollerem, sed relinquo. Minime id quidem, inquam, alienum, multumque ad ea, quae quaerimus, explicatio tua ista profecerit. Quae est igitur causa istarum angustiarum? Post enim Chrysippum eum non sane est disputatum. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes.

    Nam si amitti vita beata potest, beata esse non potest. Nam si propter voluptatem, quae est ista laus, quae possit e macello peti? Hoc loco tenere se Triarius non potuit. Istam voluptatem perpetuam quis potest praestare sapienti? Ut non sine causa ex iis memoriae ducta sit disciplina. Satis est ad hoc responsum. Pugnant Stoici cum Peripateticis.

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