Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Ajouter une fonctionnalité Lightbox/fancybox à votre blog

- Auteur : Brunofaisart

Ajouter une fonctionnalité Lightbox/fancybox à votre blog

Tous les thèmes ne proposent pas en standard une fonction d'affichage de vos images ou photos en lightbox.

C'est quoi une lightbox ?

C'est un affichage pop-in. Les pop-ins sont des cadres qui s'affichent au-dessus du contenu d'un site web. Ils peuvent être de tailles et de formes diverses.

Ils contiennent souvent du contenu lié au site web comme du texte, des photos (Lightbox) ou encore de la vidéo.

Leur fonctionnement est similaire aux pop-ups. La différence réside dans le fait que les pop-ins ne s'ouvrent qu'à l'intérieur d'une page web.

Cliquez sur la nature morte pour voir en action.

Comment procéder ?

Très simplement, il vous faut tout d'abord ajouter dans la section <HEAD></HEAD> de votre code HTML de template les deux lignes suivantes, juste avant le </HEAD> :

<link rel="stylesheet" type="text/css" href="http://assets.over-blog-kiwi.com/themes/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />



<script type="text/javascript" src="http://assets.over-blog-kiwi.com/themes/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Puis d'ajouter juste avant la balise </BODY> ce fragment de code JQUERY :

<script type="text/javascript">
                    $(document).ready(function() {
                       $("a.ob-link-img").fancybox();
                    });
</script> >

C'est tout !

Références sur la toile

A propos de Jquery

A propos de Fancybox

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Alexandre 11/11/2012 20:02

Merci pour cet article, mais il n'a résolu qu'a moitié mon problème ...
Lors de la création de mon blog (il y a 1mois) la lightbox fonctionnait très bien, elle a disparu il y a 10 jours. Pourtant, dans l'admin du blog elle apparait bien dans le code.
Jai copié ces lignes de codes pour dépanner, mais on ne peut pas naviguer (photo suivante ou précédente)
Avez vous une solution/piste pour m'aider ??

merci

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...