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
- filter: conditions. Voir doc action filter (v1.8)
- 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 = 0: 1 = 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 = 1: mode carousel. si contenu plus large que .str_wrap
- drag = 1: deplacement msg avec souris
- runshort = 1: scroll si texte court (visible sans scroll)
- hoverstop = 1: pause lors survol
- inverthover = 0: 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. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Ita relinquet duas, de quibus etiam atque etiam consideret. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo;
Verba tu fingas et ea dicas, quae non sentias? Ut proverbia non nulla veriora sint quam vestra dogmata. Ut in geometria, prima si dederis, danda sunt omnia. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.
Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Quam nemo umquam voluptatem appellavit, appellat; Quasi ego id curem, quid ille aiat aut neget.
Duo Reges: constructio interrete. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Hoc est non modo cor non habere, sed ne palatum quidem. An tu me de L.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest;
Quod si ita se habeat, non possit beatam praestare vitam sapientia. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quis istud possit, inquit, negare? Ampulla enim sit necne sit, quis non iure optimo irrideatur, si laboret? Conferam tecum, quam cuique verso rem subicias;
Hoc non est positum in nostra actione. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Conferam tecum, quam cuique verso rem subicias; Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Duo Reges: constructio interrete. An quod ita callida est, ut optime possit architectari voluptates? Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Aliud igitur esse censet gaudere, aliud non dolere. Si enim ad populum me vocas, eum. Egone quaeris, inquit, quid sentiam?
Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Videsne, ut haec concinant? Et ais, si una littera commota sit, fore tota ut labet disciplina. Tum mihi Piso: Quid ergo? Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quae diligentissime contra Aristonem dicuntur a Chryippo. Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Idemque diviserunt naturam hominis in animum et corpus.
- Restatis igitur vos;
- At modo dixeras nihil in istis rebus esse, quod interesset.
- Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur.
- Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum.
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/up/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!
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 :
- Ajouter un espace de grande taille pour forcer la hauteur de la ligne :
<b style="font-size:42px"> </b> - 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}
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}version 1.8
- filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions