Créer un carrousel avec vos images de couverture (cover image) des posts

24/08/2012 22:23

Comme vous pouvez le voir sur ce blog en pied de page, il existe un carrousel avec les miniatures des "COVER IMAGES", ou images de couverture d'un post, qui défile.
Lorsque vous cliquez sur une miniature, vous ouvrez directement le post/billet correspondant. Je me propose de vous donner le code pour afficher qulque chose de similaire et personnalisable sur votre blog.
Je vous propose en 4 morceaux de code à ajouter au HTML de votre code, d'afficher ce widget soit en haut de page, soit en bas de page du thème de votre blog. Avant toute modification de votre thème en mode HTML copier l'ensemble du code, puis collez le dans votre éditeur de texte préféré et sauvegardez le au format texte.

ETAPE 1

Tout d'abord il va falloir chaîner à votre thème le script nécessaire au fonctionnement du Carrousel. Rassurez-vos une seule ligne de code HTML à insérer juste avant la balise </HEAD> du source de votre thème. Le code à copier et à coller ci-dessous :

<script src="http://www.photonautes-associes.fr/js/jquery.carouFredSel-5.6.2.js" type="text/javascript"></script>

ETAPE 2

Pour gérer au mieux l'affichage et que le script s'éxécute correctement, nous devons créer quelques styles d'affichage qui vont décrire graphiquement la forme du carrousel. Pour ce faire, nous utiliserons le CSS. Pour ajouter ces nouveaux styles à votre thème, rien de plus facile il suffit en dessous du code HTML du script précédement inséré à votre thème de coller les CSS suivants, les noms des tyles ont leur importance pour la suite ne changez pas ceux-ci. Le fragement CSS à ajouter à votre thème :

<style>

 footer{ display: block; }
 .image_carousel {
 padding: 15px 0 15px 40px;
 width:98%; /* occupe 98 % de la zone du thème où le carrousel est placé sur votre thème */ 
}
.image_carousel img {
 border: 1px solid #ccc;
 background-color: white;
 padding: 9px;
 margin: 7px;
 display: block;
 float: left;
}
#pagefooter { background:transparent url('http://www.photonautes-associes.fr/OB-new/Epure/images/footerbg.jpg') no-repeat scroll 0% 0% transparent; height: 132px; }
/* si vous ne voulez pas de fond faire url('') */


</style>

ETAPE 3

Positionner le carrousel sur le thème, le mieux étant de le placer en pied de page ou en haut de page dans une zone horizontale. Il n'y rien de compliqué à cela , si toute fois si vous avez des doutes, indiquez moi en commentaire le nom de votre thème (si celui-ci est un thème standard) et je vous indiquerais à quels endroits vous pourrez afficher le carrousel. Le code HTML d'affichage ci-dessous :

<footer id="pagefooter">
  <div class="footerwrap">
   <div class="image_carousel">
   <div id="foo1">
       <!-- On affiche les 13 premières Cover images (images de couvertures) si elles existent -->
    {% list Blog.Posts(13) %}
                    {% if Post.Cover is not empty %}
                    <a href="{{ Post.Permalink }}" title="Ouvrir  : {{ Post.Title }}"><img src="{{ Post.Cover | resize(60,60)| crop }}" /></a>
                    {% endif %}
    {% endlist %} 
      <!-- Fin de l'affichage des couvertures de posts -->
   </div>
   <div class="clearfix"></div>
  </div></div>
</footer>

ETAPE 4

La dernière étape qui va nous permettre d'activer l'affichage du carrousel en lui passant des paramètres de durée et de le forcer à arrêter le défilement au survol de la souris afin de pouvoir cliquer sur une miniature pour ouvrir le post correspondant. Il faut dans votre thème, dans le code HTML, trouver :

$(document).ready(function() {

Puis coller le code suivant juste après :

$("#foo1").carouFredSel({
                        	auto : {
									        duration    : 1000, /* en millisecondes */
									        pauseDuration: 2000,/* en millisecondes */
								          pauseOnHover: true  /* on arrête le carrousel au survol de la souris */
    										 }
                    		});

Si vous n'avez pas trouvé le code de l'Etape 4, il vous suffit juste avant la balise </BODY> de coller le code complet ci-dessous :


<script type="text/javascript">
$(document).ready(function() {
												$("#foo1").carouFredSel({
                    		auto : {
									        duration    : 1000, // en millisecondes
									        pauseDuration: 2000,// en millisecondes 
								          pauseOnHover: true  // on arrête le carrousel au survol de la souris
    										 }
                    		});
              });
</script>

N'hésitez pas à me poser vos questions en commentant ce post.