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. Quamquam in hac divisione rem ipsam prorsus probo, elegantiam desidero. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc?

    Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Sic consequentibus vestris sublatis prima tolluntur. Quod non faceret, si in voluptate summum bonum poneret. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Hoc mihi cum tuo fratre convenit. Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Quo studio Aristophanem putamus aetatem in litteris duxisse? Sin laboramus, quis est, qui alienae modum statuat industriae?

    At habetur! Et ego id scilicet nesciebam! Sed ut sit, etiamne post mortem coletur? Sed haec quidem liberius ab eo dicuntur et saepius. Quae cum dixisset paulumque institisset, Quid est? Nos vero, inquit ille; An vero, inquit, quisquam potest probare, quod perceptfum, quod. In qua quid est boni praeter summam voluptatem, et eam sempiternam? At ille pellit, qui permulcet sensum voluptate. Quid est enim aliud esse versutum? Et quod est munus, quod opus sapientiae? Dicet pro me ipsa virtus nec dubitabit isti vestro beato M.

    Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Duo Reges: constructio interrete. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Ille enim occurrentia nescio quae comminiscebatur; Quo studio Aristophanem putamus aetatem in litteris duxisse? Quae diligentissime contra Aristonem dicuntur a Chryippo. Laboro autem non sine causa; Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Qui autem esse poteris, nisi te amor ipse ceperit?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quia studebat laudi et dignitati, multum in virtute processerat. Itaque ad tempus ad Pisonem omnes. Tamen a proposito, inquam, aberramus. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem. Torquatus, is qui consul cum Cn. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Duo Reges: constructio interrete.

    • Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere.
    • Ait enim se, si uratur, Quam hoc suave! dicturum.
    • Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum.
    • Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere.
    • Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere?

    At iam decimum annum in spelunca iacet. Sint modo partes vitae beatae. Et quidem, inquit, vehementer errat; Ex quo illud efficitur, qui bene cenent omnis libenter cenare, qui libenter, non continuo bene. Quae autem natura suae primae institutionis oblita est? Quamquam te quidem video minime esse deterritum. Quod quidem iam fit etiam in Academia. Et harum quidem rerum facilis est et expedita distinctio.

    Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Minime vero, inquit ille, consentit. Mihi, inquam, qui te id ipsum rogavi? Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et luxuriosus eodem modo.

    At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Quid sequatur, quid repugnet, vident. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Quam tu ponis in verbis, ego positam in re putabam. Ita multa dicunt, quae vix intellegam. Quae contraria sunt his, malane? Hoc tu nunc in illo probas. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Quos nisi redarguimus, omnis virtus, omne decus, omnis vera laus deserenda est. Ergo hoc quidem apparet, nos ad agendum esse natos. Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis;

    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}