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. Indicant pueri, in quibus ut in speculis natura cernitur. Quis tibi ergo istud dabit praeter Pyrrhonem, Aristonem eorumve similes, quos tu non probas? Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. Duo Reges: constructio interrete. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis.
Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Erit enim instructus ad mortem contemnendam, ad exilium, ad ipsum etiam dolorem. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit.
Praeclarae mortes sunt imperatoriae; An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Tecum optime, deinde etiam cum mediocri amico. Mihi enim satis est, ipsis non satis.
Ut scias me intellegere, primum idem esse dico voluptatem, quod ille don. Sed fortuna fortis; Utrum igitur tibi litteram videor an totas paginas commovere? Mihi, inquam, qui te id ipsum rogavi? Et adhuc quidem ita nobis progresso ratio est, ut ea duceretur omnis a prima commendatione naturae. Negat enim summo bono afferre incrementum diem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam id quidem, infinitum est in hac urbe; Sin laboramus, quis est, qui alienae modum statuat industriae? Summum ením bonum exposuit vacuitatem doloris; Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Consequens enim est et post oritur, ut dixi. Quam ob rem tandem, inquit, non satisfacit? Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Verum hoc idem saepe faciamus.
- Hoc loco discipulos quaerere videtur, ut, qui asoti esse velint, philosophi ante fiant.
- Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim.
- Aeque enim contingit omnibus fidibus, ut incontentae sint.
- Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat?
Haec dicuntur fortasse ieiunius; Cur id non ita fit? Non est igitur voluptas bonum. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Quid censes in Latino fore? Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Quia dolori non voluptas contraria est, sed doloris privatio. Sequitur disserendi ratio cognitioque naturae;
Duo Reges: constructio interrete. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? At, si voluptas esset bonum, desideraret. Nos commodius agimus. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Nam memini etiam quae nolo, oblivisci non possum quae volo. Nos commodius agimus.
Nam constitui virtus nullo modo potesti nisi ea, quae sunt prima naturae, ut ad summam pertinentia tenebit. Inquit, respondet: Quia, nisi quod honestum est, nullum est aliud bonum! Non quaero iam verumne sit; Qui est in parvis malis. Quis enim redargueret? Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Eam tum adesse, cum dolor omnis absit; Experiamur igitur, inquit, etsi habet haec Stoicorum ratio difficilius quiddam et obscurius. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.
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