Mise en place de l'effet accordéon dans la barre de navigation

La librairie Accordion permet de n'afficher le contenu que d'un seul élément d'un menu. Pour afficher, le contenu d'un autre menu, il suffit de cliquer sur le titre du menu.

Fonctionnement

Le chargement de la librairie Accordion se fait ainsi dans le fichier _head.html.

<script type="text/javascript" src="tpl:BlogThemeURL/jquery.accordion.pack.js"></script>

Le code jQuery pour l'effet accordéon est le suivant. Il s'applique à toutes les divisions de #sidebar, le titre est une balise h2 et la division ouverte est celle avec une balise h2@ ayant une classe selected. L'élément navigation: true permet une utilisation correcte d'Accordion et des listes, ici ul li@@.

$("#sidebar div").Accordion({
header: 'h2',
active: 'h2.selected',
navigation: true
});

La version 1.4 d'Accordion encadre les différents éléments affectés par la librairie par une balise fieldset. Elle m'a sauvé des griffes d'IE 7 qui ne réagissait pas correctement avec les marges et la balise li. Ainsi, la barre de navigation fonctionne avec des marges de 30px sans bug graphique. Comme tout navigateur normal, respectueux des normes W3C et bien codé devrait fonctionner…

Le contenu de la barre de navigation

La barre de navigation contient les liens vers les catégories, les tags, les archives et les liens. Il y a deux fichiers _sidebar.html et _sidebarnonav.html, le premier contient également les vignettes de photoblog et est utilisé uniquement par home.html et post.html.

Pour plus d'explication sur le fonctionnement des templates, voir le billet.

Pour les fichiers templates html autres que home.html et post.html, la barre de navigation est affiché par l'ajout de tpl:include src="_sidebarnonav.html" dans la division #sidebar.

Mise en place d'Imagebox

Le choix de la librairie Imagebox

Ce thème n'utilise que le javascript jQuery. Il serait utilisable avec dclightbox en modifiant le code jQuery comme l'explique ce billet. Mais le but est de faire un thème tout en un, sans ajout de plug-in et sans intervention de l'utilisateur du blog.

Il existe plusieurs librairies avec effet lightbox en jQuery. La plus connue - et ayant le plus de fonctionnalités - est thickbox mais elle a deux problèmes :

  • les photos sont ajustées à la résolution de la fenêtre du navigateur et sous windows, le rendu est catastrophique
  • l'activation passe par la déclaration d'une classe plutôt que par une balise rel.

Imagebox était donc la librairie parfaite, pas de réduction, activation par rel et proche en fonctionnalités de lightbox. Mais Interface, la suite comprenant Imagebox, est quasi non fonctionnelle sous Safari. Comme c'est mon navigateur par défaut…
Le libre étant ce qu'il est, j'ai trouvé une version modifiée qui fonctionne avec Safari. J'ai fait les corrections nécessaires pour compacter la librairie, elle en avait besoin. Mais, il en reste… :roll: La version non compactée est là.

Par bonheur, les effets d'animation d'Interface fonctionne sous Safari.

Fonctionnement

Imagebox fait partie de la suite Interface, il faut charger par morceaux les différents éléments non buggés. Ainsi, il faut charger toutes les librairies à partir du fichier _head.html :

<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/imagebox_pck.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifx.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxblind.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxdrop.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/ifxslide.js"></script>
<script type="text/javascript" src="tpl:BlogThemeURL/imagebox/iutil.js"></script>

Les librairies ifx….js permettent les effets, iutil.js sert de librairie ressource. Ce sont des versions compactes pour réduire le poids et le temps de téléchargement.

Ne pas oublier la feuille de style à rajouter, elle est de type media="screen". Elle permet la transparence, le positionnement des éléments et les couleurs du cadre.

@import url(tpl:BlogThemeURL/imagebox/imagebox.css);

Le billet d'une photographie n'est affiché qu'avec les fichiers templates home.html et post.html, le code est donc inséré uniquement dans ses fichiers. Tout d'abord, il est nécessaire de nettoyer le code produit par Dotclear dans une utilisation standard. Vous avez la possibilité de positionner les images comme vous le souhaitez pour utiliser des thèmes différents. Le thème centre toutes les photos donc il faut supprimer les styles supplémentaires permettant l'alignement à droite par exemple.

$(".post-content img").removeAttr("style");

Il faut ensuite affecter l'effet Imagebox à un lien vers l'image. Le nom de l'image sert de titre. Cela n'interfère pas avec les autres liens présents dans le billet.

$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});

Ce code fonctionne pour un billet précis donc pour post.html. Pour home.html, il faut choisir, comme précédemment, un billet courant.

<tpl:Entries lastn="1">
$(".post-content a").attr({rel: "imagebox", title: "tpl:EntryTitle"});
</tpl:Entries>

La pagination reste également fonctionnelle. Le code précédent est placé avant la classe .post-content, le suivant servant à initialiser l'effet est placé, lui, après. Les options utilisées comprennent la taille du cadre, le lien vers un gif animé pour attendre le chargement de l'image ainsi que le lien vers l'image d'arrêt de l'effet.

$.ImageBox.init( {
border: 20,
loaderSRC: 'tpl:BlogThemeURL/imagebox/loading.gif',
closeHTML: '<img src="tpl:BlogThemeURL/imagebox/close.gif" />'
});

Pour quitter Imagebox, il faut aussi possible d'utiliser le bouton esc.

Mise en garde

Par contre, Imagebox a un gros défaut, il y a un bug graphique avec Tabs. Il est surtout sensible sous Internet Explorer, les onglets sont au-dessus des photos…

Quelques fioritures

Affichage du nombre de commentaires et de rétroliens

J'ai utilisé les templates de Mirovinben pour afficher uniquement le nombre de commentaires et de rétroliens. Ils sont aussi présent dans moreTpl de Kozlika.

Afficher/Masquer Ajouter un commentaire

J'ai utilisé le même principe que pour AltowithjQuery tout en ajoutant un icône dont l'état est contrôlé par les classes showul et hideul. Par ailleurs, j'ai ajouté la classe h3form au titre de l'ajout de commentaire, division #comment-form, pour que le titre de la zone de prévisualisation, division #pr, ne soit pas pris en considération.

<script type="text/javascript">
$(document).ready(function() {
if ($('#pr').is(':visible')) {$('.hidecomment-form').show()} else {$(".hidecomment-form").hide()};
$("#comment-form .h3form").addClass("hideul").click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp("fast");
$(this).removeClass("showul");
$(this).addClass("hideul");
} else {
answer.slideDown("slow");
$(this).removeClass("hideul");
$(this).addClass("showul"); }
});
});
</script>

Modifier #top

Pour mieux séparer visuellement #top du contenu du blog, il est possible d'utiliser un fond blanc. Dans le fichier style.css, il suffit d'ajouter */ à toutes les lignes /* header blanc ce qui décommentera la règle css. Il faudra également commenter les règles qui fixent un fond noir en supprimant */ à toutes les lignes /* header noir */.

Utiliser des widgets

Le code n'est pas présent mais il est possible d'utiliser des widgets. Il suffit de rajouter le code suivant avant </fieldset> dans les fichiers _sidebar.html et _sidebarnonav.html. N'oubliez pas d'ôter les widgets Liste des catégories, Tags, Liens de navigation, Liens d'abonnement et Liens pour éviter d'avoir les informations en double.

<div id="blognav">
tpl:Widgets type="nav"
</div>
<div id="blogextra">
tpl:Widgets type="extra"
</div>