frendeitpt

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: UP-1.0 - 28/7/2017 @license: GNU/GPLv3 @credit: script JS limarquee de omcg33 @tags: layout-dynamic
  • 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 = 0: 1 = 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 = 1: mode carousel. si contenu plus large que .str_wrap
  • drag = 1: deplacement msg avec souris
  • runshort = 1: scroll si texte court (visible sans scroll)
  • hoverstop = 1: pause lors survol
  • inverthover = 0: 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. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Quamquam tu hanc copiosiorem etiam soles dicere. Duo Reges: constructio interrete. Duarum enim vitarum nobis erunt instituta capienda. Sed quid attinet de rebus tam apertis plura requirere? Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. At ego quem huic anteponam non audeo dicere;

    Quod non faceret, si in voluptate summum bonum poneret. In eo enim positum est id, quod dicimus esse expetendum. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Neque solum ea communia, verum etiam paria esse dixerunt. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Isto modo ne improbos quidem, si essent boni viri.

    Atque etiam valítudinem, vires, vacuitatem doloris non propter utilitatem solum, sed etiam ipsas propter se expetemus. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Egone quaeris, inquit, quid sentiam? Idem fecisset Epicurus, si sententiam hanc, quae nunc Hieronymi est, coniunxisset cum Aristippi vetere sententia. Gerendus est mos, modo recte sentiat. Ita graviter et severe voluptatem secrevit a bono.

    Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Magna laus. Itaque fecimus. Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis. Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Sed ego in hoc resisto; Ut in geometria, prima si dederis, danda sunt omnia. Consequentia exquirere, quoad sit id, quod volumus, effectum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tubulo putas dicere? Ut aliquid scire se gaudeant? Iam doloris medicamenta illa Epicurea tamquam de narthecio proment: Si gravis, brevis; Tum ille timide vel potius verecunde: Facio, inquit. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Quid est enim aliud esse versutum? Duo Reges: constructio interrete. Istic sum, inquit.

    • Multoque hoc melius nos veriusque quam Stoici.
    • Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile.
    • Ergo hoc quidem apparet, nos ad agendum esse natos.

    Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Sed virtutem ipsam inchoavit, nihil amplius. In schola desinis. Respondent extrema primis, media utrisque, omnia omnibus. Eadem nunc mea adversum te oratio est. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Illa argumenta propria videamus, cur omnia sint paria peccata. Sic enim censent, oportunitatis esse beate vivere. Qui non moveatur et offensione turpitudinis et comprobatione honestatis?

    Mihi, inquam, qui te id ipsum rogavi? Dici enim nihil potest verius. Paria sunt igitur. Tecum optime, deinde etiam cum mediocri amico. Nulla erit controversia. Idemne, quod iucunde?

    Quae similitudo in genere etiam humano apparet. Equidem e Cn. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Odium autem et invidiam facile vitabis. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Aliter homines, aliter philosophos loqui putas oportere? Etiam beatissimum? Si sapiens, ne tum quidem miser, cum ab Oroete, praetore Darei, in crucem actus est. Quid affers, cur Thorius, cur Caius Postumius, cur omnium horum magister, Orata, non iucundissime vixerit?

    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/up/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