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. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Non quam nostram quidem, inquit Pomponius iocans; Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Post enim Chrysippum eum non sane est disputatum. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Sed residamus, inquit, si placet. Duo Reges: constructio interrete. Eadem nunc mea adversum te oratio est.

    Non potes, nisi retexueris illa. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Expectoque quid ad id, quod quaerebam, respondeas. Omnia contraria, quos etiam insanos esse vultis. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Tum ille timide vel potius verecunde: Facio, inquit. Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Neque solum ea communia, verum etiam paria esse dixerunt. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Quam si explicavisset, non tam haesitaret. Vives, inquit Aristo, magnifice atque praeclare, quod erit cumque visum ages, numquam angere, numquam cupies, numquam timebis. Vitiosum est enim in dividendo partem in genere numerare.

    An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Quantum Aristoxeni ingenium consumptum videmus in musicis? Hanc quoque iucunditatem, si vis, transfer in animum; Te enim iudicem aequum puto, modo quae dicat ille bene noris. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Uterque enim summo bono fruitur, id est voluptate.

    Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Non pugnem cum homine, cur tantum habeat in natura boni; Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Sic consequentibus vestris sublatis prima tolluntur. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Nonne igitur tibi videntur, inquit, mala?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Miserum hominem! Si dolor summum malum est, dici aliter non potest. Non enim iam stirpis bonum quaeret, sed animalis. Illi enim inter se dissentiunt. Quorum sine causa fieri nihil putandum est. Ego vero volo in virtute vim esse quam maximam; Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete.

    Primum Theophrasti, Strato, physicum se voluit; Honesta oratio, Socratica, Platonis etiam. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Quae similitudo in genere etiam humano apparet. Ita graviter et severe voluptatem secrevit a bono. Quis enim potest ea, quae probabilia videantur ei, non probare? Et quae per vim oblatum stuprum volontaria morte lueret inventa est et qui interficeret filiam, ne stupraretur. Quis enim potest ea, quae probabilia videantur ei, non probare?

    Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Quo studio Aristophanem putamus aetatem in litteris duxisse? Est, ut dicis, inquit; Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Negabat igitur ullam esse artem, quae ipsa a se proficisceretur;

    • Aliud igitur esse censet gaudere, aliud non dolere.
    • Ex eorum enim scriptis et institutis cum omnis doctrina liberalis, omnis historia.

    Quid enim est a Chrysippo praetermissum in Stoicis? Ita multo sanguine profuso in laetitia et in victoria est mortuus. Teneo, inquit, finem illi videri nihil dolere. Sed quid minus probandum quam esse aliquem beatum nec satis beatum? Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Sine ea igitur iucunde negat posse se vivere?

    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}