Accueil Artisan du web références Ressources webmaster Contact

Diaporama ou slider jQuery

 

Dans le cadre d'une boutique, il peut être intéressant de faire défiler sur la page d'accueil, les nouveautés (x derniers articles saisis) ou les promos (sélectionnés en back-office).

C'est assez lourd à faire en Flash. En jQuery, c'est un jeu d'enfant.

 

1. Ajouter dans le header, l'appel à la feuille de style slider.css et à la bibliothèque jQuery

<link rel="stylesheet" type="text/css" href="slider.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Feuille de style :
/* slider.css */ img.flottant { float:left; margin-right:10px; } h2.slider_post_title { margin-top:0px; } h2 a:hover, .slider_post h2 a:hover{ color:#b4306A; text-decoration:none; } .slider_post_entry p{ font:normal 12px arial; color:#2c2b2b; line-height:15px; } .slider_post a, .slider_post a:visited{ color:#84003A; text-decoration:none; } .slider_post a:hover{ text-decoration:underline; } .featured_slider{ position:relative; background:#eee; width:520px; margin-bottom:20px; padding-top:5px; padding-bottom:5px; height:190px; } .featured_slider #slider_root{ position:relative; width:480px; margin:10px auto 0 auto; height:140px; border:1px solid #ddd; background:#FFF6Fd; padding:10px 5px; } #slider_root{ overflow:hidden; } .featured_slider .slider_items{ width:20000em; position:absolute; } .slider_post{ float:left; width:460px; position:relative; padding:0 10px; } .slider_post h2{ border-bottom:none; } .slider_post h2 a, .slider_post h2 a:visited{ font:normal 20px georgia; } .slider_post a.continue_reading{ display:none; } .slider_post a.block_link, .slider_post a.block_link:visited{ display:block; font:bold 10px tahoma; text-transform:uppercase; text-decoration:none; padding:5px; color:#fff; margin-top:10px; background:#84003A; position:absolute; right:10px; } .slider_post a.block_link:hover{ background:#b4306A; text-decoration:none; } .slider_nav{ position:absolute; bottom:5px; right:15px; width:505px; height:16px; text-align:right; } .slider_nav a span{ display:none; } .slider_nav a, .slider_nav a:visited{ display:inline-block; background:#ccc; width:10px; height:10px; margin-left:3px; } .slider_nav a.active, .slider_nav a.active:visited, .slider_nav a:hover{ background:#777; }

2. Ajouter à l'endroit de la page où vous voulez voir apparaître le slider :

<div class="featured_slider"> <div id="slider_root"> <div class="slider_items"> <div class='slider_post clearfix'> <img class='flottant' src='images/livre1.jpg' /> <h2 class='slider_post_title'><a href='jquery_slider.php'>Test slider item 1</a></h2> <div class='slider_post_entry'> <p>texte 1</p> <a class='block_link' href='$row->lien'>Voir la fiche</a> </div></div> <div class='slider_post clearfix'> <img class='flottant' src='images/livre2.jpg' /> <h2 class='slider_post_title'><a href='jquery_slider.php'>Test slider item 2</a></h2> <div class='slider_post_entry'> <p>texte 2</p> <a class='block_link' href='$row->lien'>Voir la fiche</a> </div></div> <div class='slider_post clearfix'> <img class='flottant' src='images/livre3.jpg' /> <h2 class='slider_post_title'><a href='jquery_slider.php'>Test slider item 3</a></h2> <div class='slider_post_entry'> <p>texte 3</p> <a class='block_link' href='jquery_slider.php'>Voir la fiche</a> </div></div> </div></div> <div class="slider_nav"> <a href='#' class='active'><span>item 1</span></a> <a href='#'><span>item 2</span></a> <a href='#'><span>item 3</span></a> </div> </div>

3. Ajouter à la fin de la page juste avant la fin du body <script type='text/javascript' src='http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js?ver=3.0.1'></script> <!-- Scrollable --> <script type="text/javascript"> jQuery(document).ready(function($){ $(function() { // initialize scrollable $("#slider_root").scrollable({circular: true}).navigator({ navi: ".slider_nav", naviItem: 'a', activeClass: 'active' }).autoscroll({interval: 7000}); }); }); </script>

4. Résultat :

5. Ecrivez les items de façon dynamique avec PHP

$req="select * from articles where promo=1 order by id DESC"; $sql=mysql_query($req); while ($row=mysql_fetch_object($sql)) { echo "<div class='slider_post clearfix'>"; echo "<img class='flottant' src='images/$row->photo' /> "; echo "<h2 class='slider_post_title'><a href='$row->lien'>$row->nom</a></h2>"; echo "<div class='slider_post_entry'>"; echo "<p>$row->description</p>"; echo "<a class='block_link' href='fiche.php?id=$row->id'>Voir la fiche</a>"; echo "</div></div>"; }

Plan du site | Mentions légales | Bardamu?    ©2007-2011