Source : http://www.texotela.co.uk/code/jque...
Il existe de nombreuses solutions javascript pour faire défiler un bandeau d’informations ou d’actualités ou pour faire alterner l’affichage d’images dans une page web. Il est logique que jQuery permette lui aussi de réaliser ceci simplement.
L’intérêt de ce script par rapport à d’autres est l’accessibilité de la liste des images ou liens proposés : ils sont tous présents dans le code source et les personnes dont le javascript est désactivé verront toutes les propositions (nb : cela signifie que vous devez avoir prévu dans votre présentation que l’aspect visible n’est plus le même avec ou sans javascript).
Après avoir installé jQuery sur votre site et l’avoir appelé dans votre entête html [1], suivez les instructions suivantes :
Des news qui ont de la class
Cette classse "newsticker" déterminera l’aspect extérieur de la partie qui sera affichée. Ici des caractères blancs, un bord en pointillé avec un fond bleu.
.newsticker {
color : white;
list-style-type: none;
border: 1px dashed #fff;
background: #050c44;
padding: 3px;
margin: 0;
}Cette classe sera attribuée aux éléments de l’id news qui suit.
Votre code html dans la page web
Dans votre page html, créez maintenant une liste (ul) dont les éléments (li) seront les différents objets que vous voule alterner à l’affichage.
<ul id="news">
<li>Visitez <a href="http://www.spip.net/">SPIP</a> pour découvrir le meilleur CMS du monde</li>
<li>Visitez <a href="http://doc.spip.org/">Doc.spip.org</a>pour un voyage dans les arcanes des fonctions du code de spip</li>
<li>Visitez <a href="http://www.spip-contrib.org/">Spip-contrib</a> pour apprendre à personnaliser votre spip</li>
<li>Visitez the <a href="http://jquery.info/">jQuery.info</a> pour comprendre ce que jQuery apporte à votre site</li>
</ul>Ou plus précisement si vous êtes un spipeur (bravo !) et que vous souhaitez afficher les logos de trois articles pris au hasard :
<ul id="news">
<BOUCLE_NEWS(ARTICLES){par hasard}{0,3}>
<li><a href="#URL_ARTICLE" alt="[(#TITRE|texte_script)]">#LOGO</a></li>
</BOUCLE_NEWS>
</ul>Le jQuery script qui fait tout
/*
*
* Copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/
/*
* Un affichage d'actus simple
*
* @nom newsticker (ou newsTicker)
* @param delay Delai (en millisecondes) entre les iterations. Par default 4 secondes (4000ms)
* @autheur Sam Collett (http://www.texotela.co.uk)
* @adaptation Allergie aka Philippe Auriol
* @exemple $("#news").newsticker(); // ou jQuery("#news").newsticker(5000);
*
*/
jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay)
{
return this.each(
function()
{
if(this.nodeName.toLowerCase()!= "ul") return;
delay = delay || 4000;
var self = this;
self.items = jQuery("li", self);
// cache tous les items (sauf le premier)
self.items.not(":eq(0)").hide().end();
// item courant
self.currentitem = 0;
var doTick = function()
{
jQuery.newsticker(self);
}
setInterval(doTick,delay);
}
)
.addClass("newsticker")
.hover(
function()
{
// se met en pause si on passe la souris dessus
this.pause = true;
},
function()
{
// stop la pause quand on enleve la souris de l'item
this.pause = false;
}
);
}
jQuery.newsticker = function(el)
{
// retour si la souris passe dessus
if(el.pause) return;
// cache l'item courant
jQuery(el.items[el.currentitem]).fadeOut("slow",
function()
{
jQuery(this).hide();
// passe a l'objet suivant et le montre
el.currentitem = ++el.currentitem % (el.items.size());
jQuery(el.items[el.currentitem]).fadeIn("slow");
}
);
}Vous pouvez voir le résultat final sur cette page de démonstration.
la classe "newsticker" c’est dans un css que je la déclare ?
RSS 2.0
Plan du site
Espace privé