Utiliser Fancybox pour afficher le détail d'un post/billet

5 Septembre 2012

Fancybox, en standard avec Overblo/Kiwi, permet d'afficher dans une fenêtre pop-in vos images au dessus de vos contenus, on peut aussi, comme je l'utilise dans mon thème "Mini-blog" s'en servir pour afficher le détail d'un post (lire la suite..., en savoir plus.. etc).

Comment faire ?

Tout d'abord vérifiez dans la section <HEAD> de votre thème que ces deux lignes existent (elles ne sont pas l'une sous l'autre !)

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

Ensuite, juste avant la balise de fin de </BODY>, ajouter ces lignes de code :

<script type="text/javascript">
    $(document).ready(function() {
        $(".dispart").fancybox({
	 	 'width' : '100%',
		 'height' : '80%',
		 'autoDimensions' : false,
		 'cyclic': 'true',
		 'titleShow': false,
		 'autoScale' : false,
		 'overlayColor': '#000',
		 'transitionIn' : 'none',
		 'transitionOut' : 'none',
		 'padding': '12',
		 'scrolling' : 'auto',
		 'centerOnScroll' : false,
		 'type' : 'ajax'
	       });
        });
</script>

Maintenant il nous faut modifier le thème en trouvant le test d'affichage de l'article ou billet :

{% if isSingle %}
[...]
{% endif %}

...et modifier de la façon suivante :

<a name="goart"></a>
{% if isSingle %}
[...]
{% endif %}

Et enfin trouver tous les appels d'affichage du détail du billet ou article qui doivente être de la forme :

<a href="{{Post.Permalink}}">[...]</a>

Et modifier comme ci-dessous...

<a href="{{Post.Permalink}}#goart" class="dispart" rel="mesposts"title="{{Post.Title}}">[...]</a>

C'est tout.