JoomlaDay FR
➠ marquee : contenu HTML défilant horizontalement ou verticalement DEMO
{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

    Sur un script de script JS limarquee de omcg33 (licence MIT)

    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. Nunc haec primum fortasse audientis servire debemus. Itaque et manendi in vita et migrandi ratio omnis iis rebus, quas supra dixi, metienda. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Nec enim, omnes avaritias si aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Itaque rursus eadem ratione, qua sum paulo ante usus, haerebitis. Duo Reges: constructio interrete. Quamquam id quidem, infinitum est in hac urbe; Nam de isto magna dissensio est.

    Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Tubulo putas dicere? Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Videsne quam sit magna dissensio? Sit hoc ultimum bonorum, quod nunc a me defenditur; Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant.

    Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Sed ad rem redeamus; At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?

    Hoc non est positum in nostra actione. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Mihi enim satis est, ipsis non satis. Hos contra singulos dici est melius. Nunc omni virtuti vitium contrario nomine opponitur. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo Reges: constructio interrete. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Sint modo partes vitae beatae. Cur post Tarentum ad Archytam? Quaerimus enim finem bonorum. Quamquam id quidem, infinitum est in hac urbe; Inde sermone vario sex illa a Dipylo stadia confecimus. Omnes enim iucundum motum, quo sensus hilaretur.

    Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria? An quod ita callida est, ut optime possit architectari voluptates?

    Hunc vos beatum; Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Velut ego nunc moveor. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quia, si mala sunt, is, qui erit in iis, beatus non erit. Summum ením bonum exposuit vacuitatem doloris;

    • Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.
    • Sed ille, ut dixi, vitiose.

    Verum hoc idem saepe faciamus. Ita graviter et severe voluptatem secrevit a bono. Isto modo ne improbos quidem, si essent boni viri. Vide, quantum, inquam, fallare, Torquate. Age, inquies, ista parva sunt. Dolere malum est: in crucem qui agitur, beatus esse non potest. Hoc loco tenere se Triarius non potuit. Sint ista Graecorum; Quid censes in Latino fore? Quoniam, si dis placet, ab Epicuro loqui discimus.

    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}