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. Inde sermone vario sex illa a Dipylo stadia confecimus. Hoc Hieronymus summum bonum esse dixit. Istam voluptatem perpetuam quis potest praestare sapienti? Isto modo ne improbos quidem, si essent boni viri. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Duo Reges: constructio interrete. Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.
Nullus est igitur cuiusquam dies natalis. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Tanta vis admonitionis inest in locis; Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Tu vero, inquam, ducas licet, si sequetur; Prioris generis est docilitas, memoria; An hoc usque quaque, aliter in vita? Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers?
Quid autem habent admirationis, cum prope accesseris? Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Sit enim idem caecus, debilis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Idem iste, inquam, de voluptate quid sentit? Sint ista Graecorum; In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Quod eo liquidius faciet, si perspexerit rerum inter eas verborumne sit controversia.
Non igitur bene. Rationis enim perfectio est virtus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quid enim? Traditur, inquit, ab Epicuro ratio neglegendi doloris. Primum in nostrane potestate est, quid meminerimus?
- Traditur, inquit, ab Epicuro ratio neglegendi doloris.
- Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam.
- Terram, mihi crede, ea lanx et maria deprimet.
- Immo videri fortasse.
At iam decimum annum in spelunca iacet. Et quidem, inquit, vehementer errat; Haec quo modo conveniant, non sane intellego. Duo Reges: constructio interrete. Paria sunt igitur. Quod quidem nobis non saepe contingit. Sed ego in hoc resisto; Contemnit enim disserendi elegantiam, confuse loquitur. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; Nihil opus est exemplis hoc facere longius. Quam illa ardentis amores excitaret sui! Cur tandem?
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)