Ce poste n’a rien avoir avec le reste. Il est juste fait pour partager une bribe de connaissance et éviter de faire perdre du temps aux gens qui se poserais la même question.

J’utilise WP Lightbox 2 pour l’affichage de mes images sur ce site, car il est simple, efficace et plutôt beau gosse.

Mais celui ci fait une animation étrange pour passer à l’image suivante ou précédente. La flèche de gauche ou droite, arrive du coin haut droit du bloc pour arriver à sa position normal, ce qui est particulièrement laid. Et malgré la mises à jours fréquente, apparemment ce n’est pas d’actualité de vouloir régler ce problème.

Pour modifier cela, c’est dans les feuilles de style CSS et c’est très simple, il vous suffit d’aller modifier le fichier de style qui se cache dans (Votre site)/wp-content/plugins/wp-lightbox-2/styles/. On va ici s’intéresser aux fichiers lightbox.min.css et lightbox.css. Dans ces derniers on va supprimer la boite « #prevLink, #nextLink{} », pour la diviser en deux avec les propriétés suivantes :

#prevLink {
	width: 45%;
	height: 100%;
	background: transparent url('./images/blank.gif') left 50% no-repeat;
	display: block;
}
#nextLink {
	width: 45%;
	height: 100%;
	background: transparent url('./images/blank.gif') right 50% no-repeat;
	display: block;
}

On modifie donc ici le bloc dans sa condition initiale (avant que la souris ne passe dessus), pour lui appliquer les mêmes valeurs de positionnement que lorsque la souris est dessus. Évidements vous pouvez aussi y appliquer autant de folie que votre imaginaire pourra vomir.

Au passage je viens d’ajouter à WordPress le plug-in Prettify Code Syntax pour afficher le code ci dessus bien joliment. SyntaxHighlighter Evolved est également un très bon plug-in dans le genre, mais malheureusement on ne peut pas sélectionner le code sans les numéros de lignes.

À vite.