News Slider – Défilement d’infos – en utilisant jQuery
Hi all,
Update: Prestashop Module actualité avec défilement
Après un ancien article traitant la façon de comparer deux dates en php, voila un deuxième article concernant le développement web.
Ce qu’on appelle le « News Slider » ou en Français « Défilé de news » (traduction césarienne ) est devenu une partie très importante lors du développement ou la création de n’importe quel site web.
La rubrique classique des news genre un div qui contient les titres des 2 ou 3 news récents n’est plus à la mode. Celà dit, l’utilisation d’un slider dynamique est devenu très indispensable et a part la partie esthetique, il permet de gagner plus d’espace sur la page web. Une astuce très pratique que j’ai trouvé sur le web est l’utilisation de la bibliothèque jQuery (en combinaison avec PhP/MySQL si vous voulez) pour génerer un news slider:
Un exemple bien expliqué pour la création d’un news slider:
Dans la balise head:
Dans la balise body:
Demonstration de News Slider en jQuery
Ce script pourra aussi être utilisé en tant que slider photos jQuery ou défilement phtos en jQuery il suffit juste de modifier les dimensions et de mettre des photos au lieu de mettre des news 
demo du jQuery news slider
Téléchargement: (click droit > enregistrer sous)
jquery-1.2.3.pack.js
jquery.easynews.js
Version complète:
News_slider.zip
Edit: Jai oublié d’ajouter la source[en]
Articles similaires:
A propos de l'auteur
Jeune développeur web et expert en SEO. Actuellement à la tête de l'agence de développement des sites Internet Galerie César.
Commentaires
Trackbacks
Aucun trackback pour cet article.
salut svp j’ai un probleme avec ce script, je devellope un site , et j’ai mis ce code dans mon site il fonctionne en local, mais la barre de navigation juste en bas, n’apparai pa comme lien,elle n’est pas fonctionnelle..aidez moi s’il vous plait.
Bonjour,
J’utilise Jquery version 1.4.2, et cela ne semble pas fonctionner (pas de probleme avec la 1.2.3)
Il y a t il un correctif ?
Merci
Fred
La solution est ici:
http://blog.galerie-cesar.com/probleme-avec-jquery-1-4-2/
J’ai toujours le même problème que roland. Je suis débutant, pourriez-vous donnez le correctif précis s’il vous plait!
Merci d’avance
Bonjour,
Est-il possible de placer le simages dans un autre dossier que celui qui contient les pages de code ?
Merci, super boulot !
Je me réponds à moi-même : il suffit d’ajouter la ligne « imagedir:’/dossier/’
dans le script….
Salut à vous et merci pour ce code, il fonctionne très bien
J’aurais juste une question, j’essaie que le bouton next soit actif directement
parce que le soucis que je rencontre c’est que si notre souris va sur l’image avant le premier déffilement, il ne s’activera jamais…
Merci d’avance
Autant pour moi, le bouton « pause » n’étant pas actif, cela faisait en sorte que il ne fonctionnait pas bien…
Je n’ai donc plus de problèmes il faut obligatoirement que les 3 images soient chargées (précédent, pause, suivant)
Ahh !!
Je cherchais la demo, la voici :
http://blog.galerie-cesar.com/news-slider-demo/demonstration-de-news-slider-en-jQuery.html
Bonjour,
Comment ajouter ce code dans ma template wordpress??
Merci