marquee ~ du contenu défilant

marquee

Décrié, mais pratique et demandé, une action pour mettre du texte défilant dans vos articles

Sur un script de script JS limarquee de omcg33 (licence MIT)

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é

une demo de défilement vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo omni animali illud, quod appetiti positum est in eo, quod naturae est accommodatum. Zenonis est, inquam, hoc Stoici. Nos commodius agimus. Nihilo beatiorem esse Metellum quam Regulum. An eiusdem modi? Duo Reges: constructio interrete.

Ergo id est convenienter naturae vivere, a natura discedere. Quae contraria sunt his, malane? Suo enim quisque studio maxime ducitur. Idque testamento cavebit is, qui nobis quasi oraculum ediderit nihil post mortem ad nos pertinere? Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur?

Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Earum etiam rerum, quas terra gignit, educatio quaedam et perfectio est non dissimilis animantium. At enim hic etiam dolore. Nunc omni virtuti vitium contrario nomine opponitur. Gloriosa ostentatio in constituendo summo bono. Quid, si reviviscant Platonis illi et deinceps qui eorum auditores fuerunt, et tecum ita loquantur? Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Istam voluptatem perpetuam quis potest praestare sapienti? Quae duo sunt, unum facit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Duo Reges: constructio interrete. Addidisti ad extremum etiam indoctum fuisse. At certe gravius. Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. Audeo dicere, inquit. Post enim Chrysippum eum non sane est disputatum.

Sed in rebus apertissimis nimium longi sumus. Scio enim esse quosdam, qui quavis lingua philosophari possint; Quamquam te quidem video minime esse deterritum. Satis est ad hoc responsum. Id est enim, de quo quaerimus. Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio. At multis malis affectus. Sin laboramus, quis est, qui alienae modum statuat industriae?

Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Quis istum dolorem timet? Occultum facinus esse potuerit, gaudebit; Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Pauca mutat vel plura sane; At miser, si in flagitiosa et vitiosa vita afflueret voluptatibus.

• Quasi ego id curem, quid ille aiat aut neget.
• Causa autem fuit huc veniendi ut quosdam hinc libros promerem.
• At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?
• Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo;

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}

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 :

1. Ajouter un espace de grande taille pour forcer la hauteur de la ligne : <b style="font-size:42px"> </b>
2. 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}

TEXTE AVEC IMAGE

Des idées de cadeaux !

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}