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
10 Responses
Si je peux me permettre, pour la fin, ça serait plutôt <?php get_FlickrRSS(); ?> non ?
Exact, ça doit être une erreur de copié/collé ^^
Heu, en gros, si on est pas administrateur de son blog, comme sous blogspot, on peut se brosser ?
@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
Très chouette le rendu !
[...] Une superbe galerie Flickr pour votre blog. Via Le Journal du Blog [...]
[...] Une superbe galerie Flickr pour votre blog [...]
Désolé de revenir sur cet article 6 mois après, mais j’essaye de mettre en place la galerie et franchement je galère (grave).
Certes, je suis un peu une quiche en html/php/css &co mais, ça ne me parait pas clair, notamment où je copie les différents code.
Par exemple :”Ensuite, ajoutez le code pour installer Fancybox :”, moi je veux bien, mais où…
Si vous pouviez m’éclairer sur plus en détails sur où copier chacun des codes (sachant que je suis sous wordpress).
Merci !
on peu tout simplement utiliser la fameuse bibliothèque d’image lightbox.
on met les fichiers js et css a la racine du blog et on rajout ds la balise head de la page index du blog le code qui fait appelle aux elements de cette bibliothéque
par ex:
et c’est ainsi de suite pour les fichiers js..
mt ds [administration] du blog on fait nouveau article on change le mode en HTML
c’est statique mais pratique
mes explicatios sont sous forme des codes html alors ils sont complétement effacés c’est logique sinon…………!