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. Sed vos squalidius, illorum vides quam niteat oratio. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Quae cum dixisset paulumque institisset, Quid est? Tu enim ista lenius, hic Stoicorum more nos vexat. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere?

    An me, inquis, tam amentem putas, ut apud imperitos isto modo loquar? Non semper, inquam; Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam.

    Suo genere perveniant ad extremum; Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Duo Reges: constructio interrete. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Eadem nunc mea adversum te oratio est. Aliud igitur esse censet gaudere, aliud non dolere. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Consequentia exquirere, quoad sit id, quod volumus, effectum.

    Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Magno hic ingenio, sed res se tamen sic habet, ut nimis imperiosi philosophi sit vetare meminisse. Tubulo putas dicere? Itaque hic ipse iam pridem est reiectus; Videsne ut, quibus summa est in voluptate, perspicuum sit quid iis faciendum sit aut non faciendum? Verba tu fingas et ea dicas, quae non sentias?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Equidem etiam Epicurum, in physicis quidem, Democriteum puto. Negat esse eam, inquit, propter se expetendam. Age, inquies, ista parva sunt. Nos paucis ad haec additis finem faciamus aliquando; Dicimus aliquem hilare vivere; Quasi ego id curem, quid ille aiat aut neget.

    Istam voluptatem, inquit, Epicurus ignorat? Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. De hominibus dici non necesse est. Ergo omni animali illud, quod appetiti positum est in eo, quod naturae est accommodatum. Habent enim et bene longam et satis litigiosam disputationem. Scrupulum, inquam, abeunti;

    Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Quae quidem sapientes sequuntur duce natura tamquam videntes; Duarum enim vitarum nobis erunt instituta capienda. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Cum audissem Antiochum, Brute, ut solebam, cum M. Quod vestri non item. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Duo enim genera quae erant, fecit tria.

    Deinde dolorem quem maximum? Duo Reges: constructio interrete. Si longus, levis dictata sunt. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Quis enim redargueret? Quid iudicant sensus? Nam illud vehementer repugnat, eundem beatum esse et multis malis oppressum.

    • Quid enim?
    • Quorum sine causa fieri nihil putandum est.
    • Et adhuc quidem ita nobis progresso ratio est, ut ea duceretur omnis a prima commendatione naturae.
    • Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi;

    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}