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. Tu quidem reddes; Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Duo Reges: constructio interrete. Memini vero, inquam; Aufert enim sensus actionemque tollit omnem.
Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Sumenda potius quam expetenda. Quid turpius quam sapientis vitam ex insipientium sermone pendere?
Isto modo ne improbos quidem, si essent boni viri. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Sed hoc sane concedamus. Quae autem natura suae primae institutionis oblita est? Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur iustitia laudatur? Hoc loco tenere se Triarius non potuit. Quae cum dixisset paulumque institisset, Quid est? Duo Reges: constructio interrete. Ut proverbia non nulla veriora sint quam vestra dogmata. Aufidio, praetorio, erudito homine, oculis capto, saepe audiebam, cum se lucis magis quam utilitatis desiderio moveri diceret. Atque his de rebus et splendida est eorum et illustris oratio. Sapiens autem semper beatus est et est aliquando in dolore; Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est? Hoc ipsum elegantius poni meliusque potuit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit?
Age sane, inquam. Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Sint ista Graecorum; In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q.
Universa enim illorum ratione cum tota vestra confligendum puto. Cur id non ita fit? His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Primum quid tu dicis breve?
- Deinde disputat, quod cuiusque generis animantium statui deceat extremum.
- Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;
- Universa enim illorum ratione cum tota vestra confligendum puto.
- Idemne potest esse dies saepius, qui semel fuit?
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.
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)