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. Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Quid ergo hoc loco intellegit honestum? Duo Reges: constructio interrete. Eadem fortitudinis ratio reperietur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec para/doca illi, nos admirabilia dicamus. Sit enim idem caecus, debilis. Duo Reges: constructio interrete. Quid de Pythagora? Rationis enim perfectio est virtus;
Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Collatio igitur ista te nihil iuvat. Sed tamen intellego quid velit. Multoque hoc melius nos veriusque quam Stoici. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur.
Quid, quod res alia tota est? Aliter enim explicari, quod quaeritur, non potest. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.
- Nihil opus est exemplis hoc facere longius.
- Me igitur ipsum ames oportet, non mea, si veri amici futuri sumus.
- Itaque quantum adiit periculum! ad honestatem enim illum omnem conatum suum referebat, non ad voluptatem.
Sed haec nihil sane ad rem; Nos cum te, M. Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Respondent extrema primis, media utrisque, omnia omnibus. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quo modo autem optimum, si bonum praeterea nullum est? Tubulo putas dicere? Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens.
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.
MesextensionsJoomla!
