Une superbe galerie Flickr pour votre blog
Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!
Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Noémi vous propose de créer une superbe galerie Flickr pour votre blog.
Pour impressionner vos lecteurs, rien de tel qu’une petite galerie de vos photos Flickr. Mais pas une simple galerie puisqu’il s’agit d’une galerie à base du plugin Fancybox.
Cette galerie peut être ajoutée sur n’importe quel blog pour peu que vous ayez accès au code source. Nous verrons ensuite comment la rendre dynamique pour l’insérer sur votre blog Wordpress.
Exemple :
Ce dont vous aurez besoin :
Avant toute chose, vous aurez besoin de télécharger la dernière version de Fancybox, le plugin jQuery façon Lightbox ainsi que le pngFix pour éviter les bugs sur Internet Explorer 6. Enfin, téléchargez le plugin Wordpress FlickrRSS.
Nous allons maintenant voir comment mettre en place tous ces éléments pour arriver au résultat voulu.
Éléments décoratifs en CSS pour votre galerie
Pour construite notre superbe galerie de photos Flickr, nous allons utiliser un tutoriel proposé par Web Designer Wall : CSS Decorative Gallery.
Il s’agit avant tout de construire une structure basique en HTML :
<div class="flickr_gallery"> <div class="flickr_thumb"> <span> </span> <a href="#" style="background-image: url(image_thumb.jpg)" ></a> </div> <!-- other images here... --> </div> <br class="clear"/>
Voici le code à rajouter dans votre feuille de style (style.css sous Wordpress) :
body {
font-family: Georgia,sans-serif;
font-size: 14px;
color: #333;
text-align: center;
padding: 20px;
}
.flickr_gallery {
margin: 40px auto 5px;
width: 415px;
}
.flickr_thumb {
background: transparent url(imgs/polaroid.jpg) no-repeat scroll 50% 0;
display: inline;
float: left;
height: 125px;
margin: 15px 10px;
text-align: center;
width: 116px;
position: relative;
}
.flickr_thumb a {
display: block;
height: 100px;
position: relative;
width: 100px;
margin: 8px;
background-position: 50% 50%;
}
.flickr_thumb span {
background: transparent url(imgs/tape.png) no-repeat scroll 50% 0;
height: 25px;
left: 20px;
position: absolute;
top: -10px;
width: 77px;
z-index: 10;
}
.clear {
clear: both;
}
Comment intégrer Fancybox
Nous allons à présent installer l’effet zoom Fancybox à notre galerie. Pour cela, ajoutez un lien vers la bibliothèque jQuery, le plugin Fancybox et le plugin pngFix juste avant de fermer la balise <body> . (voir dans le fichier footer.php de votre thème Wordpress). Ensuite, ajoutez le code pour installer Fancybox :
<script src="js/jquery-1.2.3.js" type="text/javascript"></script> <script src="js/jquery.pngFix.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function(){
$(".flickr_gallery .flickr_thumb a").fancybox();
});
// --></script>
Il faut également ajouter deux attributs au code HTML des miniatures/thumbnails (rel pour regrouper différentes images dans une même galerie et title pour ajouter une description à la photo) :
<div class="flickr_gallery"> <div class="flickr_thumb"><span> </span> <a href="image_big.jpg"> </a> title="My Flickr Image Title" rel="FlickrGallery" style="background-image: url(image_thumb.jpg)" ></div> <!-- autres images ici... --> </div> <br class="clear" />
Pensez à faire en sorte que le CSS de votre Fancybox soit déclaré dans <head>, vous pouvez également l’intégrer dans votre CSS principal.
Rendre la galerie dynamique
Afin de rendre la galerie dynamique, c’est à dire que les photos se mettent à jour automatiquement, nous allons utiliser le plugin Wordpress FlickrRSS. Rendez-vous dans le panneau d’administration pour paramétrer le plugin. Choisissez les photos à afficher puis remplissez le formulaire de la manière suivante :
Before List:
<div class="flickr_gallery">
Item HTML:
<div class="flickr_thumb"> <a> href="%image_medium%" title="%title%" rel="FlickrGallery" style="background-image: url(%image_square%)"></a></div>
After List:
</div> <br class="clear" />
Voilà, votre galerie est terminée. Vous pouvez l’utiliser dans vos Widget pour l’ajouter à votre barre latérale ou bien l’ajouter n’importe où sur votre blog avec le code suivant :
get_FlickRSS(); ?>
Source : Stefano Verna
Vous avez aimé cet article :
abonnez-vous au flux RSS
!
Loading ...
Sakacoco le 11 septembre 2008:
Si je peux me permettre, pour la fin, ça serait plutôt <?php get_FlickrRSS(); ?> non ?
Romain le 12 septembre 2008:
Exact, ça doit être une erreur de copié/collé ^^
Seb le 12 septembre 2008:
Heu, en gros, si on est pas administrateur de son blog, comme sous blogspot, on peut se brosser ?
Aurelien le 12 septembre 2008:
@Seb : tu peux rajouter des widgets sous Blogger, et faire pas mal de modifications. Pour mettre une galerie Flickr sous Blogger, tu peux créer ton propre widget à l’aide de FlickrSLiDR, qui te permettra d’avoir facilement le code à mettre dans ta barre latérale.
A ce sujet, je répertorie des tutoriaux de Blogger, ce qui peut t’intéresser, la liste sera d’ailleurs très prochainement éditée
Zara le 12 septembre 2008:
Très chouette le rendu !
Mes favoris de la semaine #41 le 14 septembre 2008:
[...] Une superbe galerie Flickr pour votre blog. Via Le Journal du Blog [...]
Les articles du Concours du Journal du Blog : Le Journal du Blog le 25 septembre 2008:
[...] Une superbe galerie Flickr pour votre blog [...]