Il y a plusieurs mois, Édouard Puginier alias « Taz » ou « tazintosh », homme orchestre et multimédia, avait publié sur son site web une fonction que j’aimais bien : Rewind|Forward.
Mais j’avais beau suivre ses instructions pour l’ajouter à ce blog, rien n’y faisait, ça ne marchait pas. Alors, j’ai fini par en faire mon deuil et l’oublier…
… Jusqu’à récemment où j’ai lu sur Cui-Cui qu’il mettait à jour une autre des ses fonction sympathiques, « Avant|Après ».
Du coup, je me suis remis en tête de la faire marcher, cette #@&*ù$+ de fonction ! Ce qui n’a pas été des plus simples, et j’avoue même n’avoir pas tout compris, mais le fait est là : ça marche !
Pour ce faire, j’ai repris les informations qu’il m’avait fournies à l’époque, puis tripatouillé le tout dans tous les sens jusqu’au moment magique où, Eurêka, la bête fut domptée !
Alors et sauf erreur de ma part, il suffit de suivre les instructions ci-dessous.
Pour préparer (une fois pour toutes) le système :
- Installer et activer l’extension CSS & Javascript Toolbox ;
- Ouvrir CSS & Javascript Toolbox (en bas à gauche du menu latéral WP) ;
- Y créer 1 bloc css « rewind-forward-css » et 1 bloc javascript « rewind-forward-js » ;
- Les affecter tous les 2 au header de WP ;
- Dans l’onglet « Auxiliary » de chacun, cocher la case « All Posts » ;
- Coller la css de Taz dans le bloc « rewind-forward-css » tel-quel ;
- Coller le javascript de Taz dans le bloc « rewind-forward-js » en rajoutant les balises « script type= »text/javascript » au début et « /script » à la fin ;
- Et, évidemment, sauvegarder tous les réglages avant de quitter CSS & Javascript Toolbox.
Par la suite, vous pourrez rajouter dans vos billets le code html de Taz, nécessaire à l’affichage de l’effet. Glissez latéralement votre souris sur l’image ci-dessous pour voir le résultat :
À noter que, chez moi tout du moins, il ne faut pas de retour à la ligne entre les différents blocs « img », sinon, ça entraine un décalage progressif vers le bas. Je rencontre aussi des instabilités qui font que ça ne fonctionne pas tout le temps, mais comme j’ai un tas d’extensions installées, c’est peut-être dû à un conflit. Affaire à suivre…
Edit : en fait, ça marche très bien sur Firefox et de façon plus aléatoire sur Safari. Le souci serait donc plutôt lié au navigateur utilisé…
S’il n’est pas possible de mettre les mains directement dans le code de ton site, tu as fais exactement ce qu’il faut. CSS & Javascript Toolbox est un parfait outil pour cela.
Je ne me rappelle pas que tu avais abandonné la première fois, c’est dommage, ma fonction est très simple à mettre en place pourtant, mais je reconnais, il faut cependant un peu connaître HTML, CSS et JS. Tu aurais du me le dire, on aurait réglé ça rapidement. Dans la mise à jour de ma fonction de comparaison, j’ai davantage détaillé l’installation.
Je mettrai d’ailleurs prochainement à jour Rewind|Forward pour tirer avantage des dernières nouveautés intégrées, dont la gestion tactile.
En ce qui concerne ton problème de retour ligne, c’est parce-que ton wordpress fait du « AutoP » (il ajoute automatiquement des paragraphes ou retours ligne en analysant ton article (et donc le code Rewind|Forwad). Vois si ton thème permet de désactiver cela par article, sinon, il exist des plugins, sinon, tu ne mets pas de retours lignes en effet.
Salut, Taz.
Merci de ton passage et de ces éclaircissements.
T’inquiète, je ne suis pas un as du code, mais j’suis têtu ! Et puis, comme ma Môman m’a appris à me débrouiller tout seul au lieu de tanner les autres, je ne demande de l’aide que quand je suis vraiment bloqué (ce qui n’est pas passé loin, pour le coup…).
J’attends ta prochaine version de pied ferme ! 😉