Je viens de terminer l’ajout d’un carrousel en pied de page de ce blog, il affiche des photos que j’ai spécialement sélectionné et placé dans un album Flickr.
L’objectif consiste à afficher deux séries de miniatures (voire plus à l’avenir) qui défilent à la demande de l’utilisateur. Il fallait dans un premier temps charger les photos à l’aide de flickrRSS. Je vous partage en brut les sources.
<div class=".footer"> <div id="carousel"> <div id="carousel_wrapper"> <ul id="flickr"> <li>[...]</li> [....] </ul> </div> </div> <a href="#" id="backward"><span>gauche</span></a> <!-- Le bouton pour faire défiler à gauche --> <a href="#" id="forward"><span>droite</span></a> <!-- Le bouton pour faire défiler à droite--> </div> |
Ensuite, pour la feuille de style :
.footer { position: relative; } #flickr { margin: 0; padding: 0; } #flickr li { display: block; float: left; list-style-type: none; margin: 10px; padding: 0; } #flickr li a { display: block; border: 1px solid #000; } #flickr li a:hover { display: block; border: 1px solid #999; } #carousel { width: 875px; /* Valeur de référence, qui permettra de faire dérouler convenablement le carrousel */ height: 100px; margin: 0 auto; position: relative; overflow: hidden; } #wrapper { width: 1800px; height: 100px; } #forward, #backward { position: absolute; display: block; height: 32px; width: 32px; top: 35px; } #forward { background-image: url(img/forward.png); right: 10px; } #backward { background-image: url(img/backward.png); left: 8px; } #forward span, #backward span { display: none; } |
Et enfin le code Javascript :
jQuery(function(){ jQuery("a#forward").click(function(){ jQuery("#carousel_wrapper").animate({opacity: 0.1}, 200).animate({ opacity: 1.0, marginLeft: "-875px" // Vous vous souvenez de la valeur de référence? (voir plus haut, pavé CSS) }, 1000 ); return false; }); jQuery("a#backward").click(function(){ jQuery("#carousel_wrapper").animate({opacity: 0.1}, 200).animate({ opacity: 1.0, marginLeft: "0" }, 1000 ); return false; }); }); |
On peut facilement faire des trucs sympas avec animate() non?
D’autres améliorations sont prévues. Je vais m’occuper du template PHP et du layout général avec un retour du Giant Footer de la version précédente du blog 
Yes !
Excellent.
C’est normal ton « .footer » dans ton attribut XHTML « class » ?? J’ai toujours mis le nom des classes sans le point devant..
J’attends avec impatience le big footer que j’amais tant..
@Joris,
.footer fait partie des incohérences de ce thème WordPress (et de toute la série du créateur j’imagine). Il y a moyen corriger et de factoriser pas mal.
En fait, si j’étais courageux, je rependrais la CSS depuis zéro
Yeah, je suis juste à côté du phô ^.^
Sinon faudrait peut être enlever la flèche gauche et droite si on peut pas scroller dans ces directions non ?
Ah donc ça n’est pas de toi ?
Uh, déjà que tu y passes pas mal de temps… Bon courage
@xuxu, oui j’y ai pensé, c’est dans la todo!
@Joris le thème original est là :
http://www.elegantthemes.com/gallery/coldstone/
Sympa comme effet ! (mais c’est possible la même chose, sans l’effet « fading » ?
@Samy,
oui c’est possible, mais pas sur ce blog
Arf, plus besoin de se creuser les neuronnes alors !
Je me bookmark tout ça pour cet été
merci !
@nico,
si besoin hésite pas, si je peux te faire gagner du temps
Bonjour,
Je suis en train d’installer ce carroussel dans mon footer wordpress.
Pour le moment tout va bien sauf que je ne sais pas où mettre mon javascript.
J’ai tenté de mettre le bout de code dans le js qui se trouve dans le dossier js de mon thème mais rien y fait. Du coup je n’ai pas l’effet. Je n’ai que mes images avec les deux petites flèches de chaque côté.
Dois je créer un nouveau fichier js ou mettre mon bout de code ailleurs?
Merci d’avance
Thomas