{"id":734,"date":"2008-12-29T22:32:22","date_gmt":"2008-12-29T20:32:22","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=734"},"modified":"2008-12-29T22:32:22","modified_gmt":"2008-12-29T20:32:22","slug":"effet-carrousel-via-jquery","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/effet-carrousel-via-jquery\/","title":{"rendered":"Effet carousel via jQuery"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Ces derniers temps je me suis mis \u00e0 bidouiller des scripts en me basant sur jQuery. Je vous pr\u00e9sente le premier fruit de ce bidouillage : simpleCarousel<\/code>. Ce plugin permet tr\u00e8s simplement de mettre en place un effet carrousel sur une liste d’image. Ce script utilise du HTML, relev\u00e9 \u00e0 l’aide d’une pinc\u00e9e de CSS, le tout saupoudr\u00e9 d’une bonne dose de javascript via l’utilisation de jQuery.<\/p>\n

1\u00b0) le HTML. tr\u00e8s simplement on utilisera un balise div<\/code> auquel on assigne un attribut id<\/code> unique. Cette balise va contenir une liste non-ordonn\u00e9e d’image sur laquelle l’effet carousel sera appliqu\u00e9e. Ensuite on termine, par ajouter dans la page les balises qui serviront \u00e0 faire bouger vers la droite ou vers la gauche le carrousel. A noter que l’on peut ajouter autant de bouton de navigation que l’on veut vue que le script va cibler l’ attribut class<\/code> des balises et non un id<\/code> particulier.<\/em> Et c’est tout pour le HTML vous devriez avoir un code source HTML de ce type:<\/p>\n

<div id="id_unique">\n<ul>\n<li><img src="\/path\/to\/my\/images" alt="" title="titre de l'image 1" \/><\/li>\n<li><img src="\/path\/to\/my\/images" alt="" title="titre de l'image 2" \/><\/li>\n<li><img src="\/path\/to\/my\/images" alt="" title="titre de l'image 3" \/><\/li>\n<li><img src="\/path\/to\/my\/images" alt="" title="titre de l'image 4" \/><\/li>\n<\/ul>\n<\/div>\n<p><span class="move-left">\u00ab pr\u00e9c\u00e9dent<\/span>\u00a0|\u00a0<span class="move-right">suivant \u00bb<\/span><\/p><\/pre>\n
2\u00b0) Maintenant on ajoute le CSS qui va bien. Le script va g\u00e9n\u00e9r\u00e9 automatiquement l’ajout d’un titre \u00e0 chaque image correspondant \u00e0 la valeur de l’attribut title<\/code> de l’image si celle-ci en poss\u00e8de un. Le titre sera compris dans une balise em<\/code> qui suivra directement l’image utilis\u00e9e pour la g\u00e9n\u00e9rer. En utilisant le CSS on pourra mettre en valeur ce titre et \u00e9galement, par exemple, ajouter un effet lorsque l’on survole une image et pourquoi pas mettre en \u00e9vidence les balises de navigation, ce qui peut donner par exemple :<\/p>\n
#id_unique li img { border:2px solid #fff; }\n#id_unique li:hover img { border:2px solid #fb6f3a; }\n#id_unique li em { display:block; text-align:center; }\n#id_unique li:hover em { color:#fb6f3a; }\n.move-left, .move-right { background:transparent; color:#fb6f3a; cursor:pointer; }\n<\/pre>\n
3\u00b0) Lorsque tout est pr\u00e8s, on compl\u00e8te le tableau avec l’ajout du Javascript via jQuery. On charge jQuery<\/code> et mon plugin simpleCarousel<\/code> :<\/p>\n
<script type="text\/javascript" src="\/path\/to\/jquery.js?v=1.26"><\/script>\n<script type="text\/javascript" src="\/path\/to\/simpleCarousel.js"><\/script>\n<script type="text\/javascript">\njQuery(function($) {\nvar params = {'imgWidth' : 160, 'btnLeft' : 'move-left', 'btnRight' : 'move-right', 'nbViewItems' : 2, 'nbScrollItems' : 2, 'speed' : 1500 };\n$('#onepiece').simpleCarousel(params);\n});\n<\/script><\/pre>\n
Les param\u00e8tres sont assez simples et intuitifs (du moins je l’esp\u00e8re)<\/em> :<\/p>\n