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
- model = base: style CSS dans .upmq-*style*. 0=aucun
- height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
Style CSS
- 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: 1 = label sur une ligne
Divers
- id: identifiant
- filter: conditions. Voir doc action filter (v1.8)
Paramètres Javascript pour configuration
- direction = left: right, up, down
- loop = - 1: nombre d'affichage, -1 : infini
- scrolldelay: 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: 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 haec nihil sane ad rem; Quod quidem iam fit etiam in Academia. Materiam vero rerum et copiam apud hos exilem, apud illos uberrimam reperiemus. Quis istum dolorem timet? Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Quo modo autem optimum, si bonum praeterea nullum est? Terram, mihi crede, ea lanx et maria deprimet. Duo Reges: constructio interrete. Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Scrupulum, inquam, abeunti;
Idemne potest esse dies saepius, qui semel fuit? Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Suam denique cuique naturam esse ad vivendum ducem. Quamquam id quidem, infinitum est in hac urbe;
Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Quis istud possit, inquit, negare? Nobis Heracleotes ille Dionysius flagitiose descivisse videtur a Stoicis propter oculorum dolorem. Quo igitur, inquit, modo?
Hoc loco tenere se Triarius non potuit. Torquatus, is qui consul cum Cn. Tum ille: Ain tandem? Ubi ut eam caperet aut quando? Haec et tu ita posuisti, et verba vestra sunt. Ut id aliis narrare gestiant? Commentarios quosdam, inquam, Aristotelios, quos hic sciebam esse, veni ut auferrem, quos legerem, dum essem otiosus;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi ipsam honestatem undique pertectam atque absolutam. Si longus, levis; Aperiendum est igitur, quid sit voluptas; Aeque enim contingit omnibus fidibus, ut incontentae sint.
Nam Pyrrho, Aristo, Erillus iam diu abiecti. Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Proclivi currit oratio. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Quae cum magnifice primo dici viderentur, considerata minus probabantur. Et quod est munus, quod opus sapientiae? Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Si sapiens, ne tum quidem miser, cum ab Oroete, praetore Darei, in crucem actus est.
- Aliena dixit in physicis nec ea ipsa, quae tibi probarentur;
- A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas.
- Quantum Aristoxeni ingenium consumptum videmus in musicis?
- Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret?
Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Age sane, inquam. Non dolere, inquam, istud quam vim habeat postea videro; Multoque hoc melius nos veriusque quam Stoici. Qui autem esse poteris, nisi te amor ipse ceperit? Hoc loco tenere se Triarius non potuit. Sed nimis multa. Istam voluptatem perpetuam quis potest praestare sapienti? At ego quem huic anteponam non audeo dicere; Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit.
Zenonis est, inquam, hoc Stoici. Eam tum adesse, cum dolor omnis absit; Hoc simile tandem est? Non est ista, inquam, Piso, magna dissensio. Duo Reges: constructio interrete. Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Nos commodius agimus. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Isto modo ne improbos quidem, si essent boni viri.
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
marquee (9) upactionslist (1) lorem (2) lorempixel (1) readmore (1) modal (1) jcontent-info (1)