Sur un script de script JS limarquee de omcg33 (licence MIT)
{up marquee=label} texte du message défilant {/up marquee}- 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}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
info
{up marquee=infos | lbl-pos=right | model=info | lbl-style=color:yellow}le texte défilant{/up marquee}ok
{up marquee=infos| lbl-pos=right | model=ok | lbl-style=color:yellow}
<strong style="color: red;">le texte défilant</strong>
{/up marquee}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é
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in geometria, prima si dederis, danda sunt omnia. Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. At ego quem huic anteponam non audeo dicere; Illum mallem levares, quo optimum atque humanissimum virum, Cn. Duo Reges: constructio interrete.
Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Quod autem ratione actum est, id officium appellamus. Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Si enim ita est, vide ne facinus facias, cum mori suadeas. Sed haec omittamus; Sic enim censent, oportunitatis esse beate vivere. Sed haec nihil sane ad rem;
Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Illud mihi a te nimium festinanter dictum videtur, sapientis omnis esse semper beatos; Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Dolere malum est: in crucem qui agitur, beatus esse non potest. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam.
Quid est, quod ab ea absolvi et perfici debeat? Sed quod proximum fuit non vidit. Videmus igitur ut conquiescere ne infantes quidem possint. Aliter homines, aliter philosophos loqui putas oportere? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Nam de isto magna dissensio est. Sed quia studebat laudi et dignitati, multum in virtute processerat. Nos vero, inquit ille; Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Sit enim idem caecus, debilis. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Cur, nisi quod turpis oratio est? Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Duo Reges: constructio interrete.
Utilitatis causa amicitia est quaesita. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Tum ille: Ain tandem? Cui Tubuli nomen odio non est? Nemo nostrum istius generis asotos iucunde putat vivere.
Quis non odit sordidos, vanos, leves, futtiles? Quis est, qui non oderit libidinosam, protervam adolescentiam? Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Cupiditates non Epicuri divisione finiebat, sed sua satietate. Quo igitur, inquit, modo? Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Stoicos roga. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Quod vestri non item.
Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Sed ad haec, nisi molestum est, habeo quae velim. Eadem fortitudinis ratio reperietur.
- Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia?
- Quis enim est, qui non videat haec esse in natura rerum tria?
- Quae autem natura suae primae institutionis oblita est?
- Dic in quovis conventu te omnia facere, ne doleas.
promo
{ up marquee | model=promo| <span style="color: #800000;">lbl-pos=left</span>}le texte défilant{ /up marquee}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!
