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]
Catégorie: Developpement web
Tags: jQuery, news slider.
12 commentaires
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
Je trouve cette solution véritablement intéressante dans la mesure où l’internaute n’a pas le moindre clic à faire pour voir d’autres contenus qu’ils soient textuels ou visuels comme des images. Nous avons d’ailleurs mis en place une solution équivalente sur notre page d’accueil avec les news qui défilent de la sorte. Cependant, nous n’avons pas utilisé le même code source.
Je rencontre un souci au niveau de l’affichage des boutons prev pause next.
Au chargement de ma page , les 3 boutons s’affichent correctement mais au premier defilement , le bouton next disparait laissant un red cross à sa place et les deux autres boutons bougent pas meme quand quand on clique dessus j’ai pas le bouton jauve au click.
Comment resoudre ce probleme ?