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
Loading ...