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. Sed fortuna fortis; Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Efficiens dici potest. Nemo nostrum istius generis asotos iucunde putat vivere. Quia, si mala sunt, is, qui erit in iis, beatus non erit.
Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Duo Reges: constructio interrete. Graccho, eius fere, aequalí? Ut optime, secundum naturam affectum esse possit.
Qua igitur re ab deo vincitur, si aeternitate non vincitur? Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Nescio quo modo praetervolavit oratio. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Memini vero, inquam;
Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Si quicquam extra virtutem habeatur in bonis. Utrum igitur tibi litteram videor an totas paginas commovere? Sic enim censent, oportunitatis esse beate vivere. Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Nulla profecto est, quin suam vim retineat a primo ad extremum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At enim hic etiam dolore. Vide, quantum, inquam, fallare, Torquate. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Duo Reges: constructio interrete. De hominibus dici non necesse est.
Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Mihi enim satis est, ipsis non satis. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Sed fac ista esse non inportuna; Beatus sibi videtur esse moriens.
- Sed quid attinet de rebus tam apertis plura requirere?
- Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.
An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Sed in rebus apertissimis nimium longi sumus. At quanta conantur! Mundum hunc omnem oppidum esse nostrum! Incendi igitur eos, qui audiunt, vides. Haec quo modo conveniant, non sane intellego. Nos commodius agimus. Idemne, quod iucunde? Qua tu etiam inprudens utebare non numquam.
Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Sed plane dicit quod intellegit. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Sequitur disserendi ratio cognitioque naturae; Facillimum id quidem est, inquam. Quae diligentissime contra Aristonem dicuntur a Chryippo. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Traditur, inquit, ab Epicuro ratio neglegendi doloris.
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!
