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, 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}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. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Princeps huius civitatis Phalereus Demetrius cum patria pulsus esset iniuria, ad Ptolomaeum se regem Alexandream contulit. Numquam facies. Eam tum adesse, cum dolor omnis absit; Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit.
Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Non igitur bene. Quonam, inquit, modo? Quae quo sunt excelsiores, eo dant clariora indicia naturae. Videamus igitur sententias eorum, tum ad verba redeamus. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Si autem id non concedatur, non continuo vita beata tollitur. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant.
Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Apparet statim, quae sint officia, quae actiones. Si verbum sequimur, primum longius verbum praepositum quam bonum. Quae cum dixisset, finem ille. Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem. Haec para/doca illi, nos admirabilia dicamus. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Si longus, levis dictata sunt.
Hoc non est positum in nostra actione. Duo Reges: constructio interrete. Quid est igitur, cur ita semper deum appellet Epicurus beatum et aeternum? Hoc loco tenere se Triarius non potuit. Non est igitur summum malum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eo enim positum est id, quod dicimus esse expetendum. Hoc tu nunc in illo probas. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Duo Reges: constructio interrete. Quid ergo hoc loco intellegit honestum? Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam;
A mene tu? Facile est hoc cernere in primis puerorum aetatulis. Si quidem, inquit, tollerem, sed relinquo. Si quae forte-possumus. Estne, quaeso, inquam, sitienti in bibendo voluptas? Nemo igitur esse beatus potest. An nisi populari fama? Quid adiuvas? Quantum Aristoxeni ingenium consumptum videmus in musicis? Nobis aliter videtur, recte secusne, postea; Summus dolor plures dies manere non potest?
Isto modo, ne si avia quidem eius nata non esset. Non est igitur summum malum dolor. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Nos commodius agimus. Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.
Sed quia studebat laudi et dignitati, multum in virtute processerat. Eadem nunc mea adversum te oratio est. Equidem e Cn. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Ne in odium veniam, si amicum destitero tueri. Quamquam id quidem licebit iis existimare, qui legerint. Unum est sine dolore esse, alterum cum voluptate. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus? Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.
- Quis enim est, qui non videat haec esse in natura rerum tria?
- Ex rebus enim timiditas, non ex vocabulis nascitur.
- Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.
- Nihilo magis.
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!
