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. At ego quem huic anteponam non audeo dicere; Ad eos igitur converte te, quaeso.
Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? An haec ab eo non dicuntur? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Duo Reges: constructio interrete. Sed tamen intellego quid velit. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat;
At hoc in eo M. Hanc in motu voluptatem -sic enim has suaves et quasi dulces voluptates appellat-interdum ita extenuat, ut M.
Hoc est non modo cor non habere, sed ne palatum quidem. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Sin ea non neglegemus neque tamen ad finem summi boni referemus, non multum ab Erilli levitate aberrabimus. Occultum facinus esse potuerit, gaudebit; Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Tum ille timide vel potius verecunde: Facio, inquit. Eadem nunc mea adversum te oratio est. Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Indicant pueri, in quibus ut in speculis natura cernitur. Sumenda potius quam expetenda. Dici enim nihil potest verius. Duo Reges: constructio interrete. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Non est enim vitium in oratione solum, sed etiam in moribus. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Tamen a proposito, inquam, aberramus. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Nam si beatus umquam fuisset, beatam vitam usque ad illum a Cyro extructum rogum pertulisset. Nam si amitti vita beata potest, beata esse non potest. Quis tibi ergo istud dabit praeter Pyrrhonem, Aristonem eorumve similes, quos tu non probas?
His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur; A villa enim, credo, et: Si ibi te esse scissem, ad te ipse venissem. Ut in geometria, prima si dederis, danda sunt omnia. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Bonum integritas corporis: misera debilitas. Dicimus aliquem hilare vivere;
- Quorum altera prosunt, nocent altera.
- Septem autem illi non suo, sed populorum suffragio omnium nominati sunt.
- Atque ab isto capite fluere necesse est omnem rationem bonorum et malorum.
- Erat enim res aperta.
Non est ista, inquam, Piso, magna dissensio. Sed ad illum redeo. Tu vero, inquam, ducas licet, si sequetur; Quod totum contra est. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Illa argumenta propria videamus, cur omnia sint paria peccata. Ita prorsus, inquam; Multoque hoc melius nos veriusque quam Stoici.
Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Age nunc isti doceant, vel tu potius quis enim ista melius? Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Tum Quintus: Est plane, Piso, ut dicis, inquit. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Nunc haec primum fortasse audientis servire debemus.
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. Voir la documentation