Tutoriaux
Un slider en Javascript avec JQuery
La mode du web 2.0 nous a apporté beaucoup de nouvelle approche au niveau des éléments affichables sur une page web. C'est dans cette ordre d'idée que nous avons vue apparaître les Sliders. Mais qu'est-ce qu'un sliders ? Un sliders en gros permet dans un espace restreint par exemple 250 pixel d'y faire défiler manuellement à l'aide d'un bouton plusieurs texte ou image. En faisant plusieurs recherche à ce sujet je suis tombé sur le script d'un collègue de JBJ's Blog qui a créer un script vraiment génial pour tous ceux qui ne serait pas encore prêt à ce lancer dans l'édification de ce genre de script.
Ce script s'appel « Accessible News Slider » et il est téléchargable en cliquant sur le lien ci-dessous :
Télécharger
** Vous aurez besoin de la librairie JQuery pour que le script fonctionne, mais celui-ci est déjà compris dans l'archive du script.
Une fois l’archive décompressée, le slider est fonctionnel. Il vous suffit d’ouvrir le fichier index.html dans votre navigateur. Par contre, il y a de fortes chances que le look par défaut du slider ne convienne pas à la charte de votre site.
Personnalisé le slider
Le fichier slider.css contient les styles du slider. Le fichier style.css n’est là que pour la mise en forme de la page d’exemple, vous pouvez par conséquent le supprimer.
1 - Les boutons
Les images next.gif et prev.gif sont les deux boutons qui permettent de faire défiler cers la gauche ou vers la droite le slider. Ils sont définis dans la feuille de style via les classe .prev et .next.
2 - Le conteneur et l’espace visible
L’espace visible affiche par défaut deux blocs à la fois. Il est défini par la classe news_item. L’auteur indique que sa longueur doit être égale à la longueur + la marge droite de item * 2. Si par exemple vous désirez afficher 5 blocs à la fois, la longueur de news_item devra être de la longueur + la marge droite de item * 5, et ainsi de suite.
Exemple :
Longueur -> 800px
Calcul -> (140 + 20) * 5 = 800
** Attention, si vous augmentez la longueur de ce bloc, il masquera les boutons.
Le conteneur est quand à lui défini par la classe container. Par défaut, sa longueur est définie à 100%. Dans mon cas, je lui ai assigné 800px de long, c'est à dire, la longueur de ma classe news_item à cause d’un bug sous IE6.
3 - Les blocs de contenu
Les blocs sont définis par la classe item. Cette classe doit impérativement posseder les attribut width et margin-right.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...