Ça faisait un moment que je lorgnais sur un plugin qui permettrait de présenter des photos avec un système d’avant/après comme chez annso (il me semble mais je ne retrouve pas mirovinben a retrouvé l’endroit exact), ou encore très récemment chez mirovinben.
Ce système permet d’afficher une petite poignée qui permet de découvrir la photo avant et la photo après en faisant glisser le curseur horizontalement. J’ai fait une petite recherche sur Internet et je suis bien évidemment tombé sur le plugin qu’ils ont tous les deux utilisé : le plugin jQuery Before/After. Sauf qu’il impose la présence des attributs width et height dans les balises img, ce qui n’est pas toujours facile à déterminer ou à indiquer.
Puis je suis tombé sur un autre plugin, certes plus basique, mais qui me permet de m’affranchir de la présence de ces attributs : Le plugin TwentyTwenty. Alors comme il avait l’air de convenir, disponible sous licence MIT (compatible avec la GPL v2) j’en ai fait un plugin pour Dotclear.
Activation et utilisation
Une fois installé il s’active dans les paramètres du blog, avec une simple case à cocher.
Pour l’utiliser, une fois que vous avez préparé les deux photos, avant et après — ça marche aussi pour d’autres types d’images, rassurez-vous ! — il faut utiliser la syntaxe suivante :
<div class="twentytwenty-container"> <img src="/public/avant.jpg" title="Image avant" alt="Image avant traitement" /> <img src="/public/apres.jpg" title="Image après" alt="Image après traitement" /> </div>
Vous pouvez également l’utiliser en mode wiki Dotclear en encadrant vos deux images insérées normalement par des blocs HTML[1] contenant <div class="twentytwenty-container"> et </div>. Ça fonctionne très bien aussi.
Si vous souhaitez modifier l’alignement de l’ensemble vous pouvez, à la <div class="twentytwenty-container"> ajouter une seconde classe :
twentytwenty-left: pour cadrer à gauchetwentytwenty-center: pour centrertwentytwenty-right: pour aligner à droite
Notez que si pour une raison ou une autre l’effet n’était pas activable (Javascript désactivé, …), les deux images apparaitront alors l’une derrière l’autre, tout simplement (ce qui sera le cas dans les flux RSS par exemple).
Ce billet servira de support pour cette version du plugin.
1 De Jean-Michel -
Il manque http:// sur le premier lien :)
2 De Franck -
Ah oui, tu as raison Jean-Michel, c’est corrigé.
3 De mirovinben -
Je vais le tester et sans doute l’adopter (à cause justement de la contrainte de devoir indiquer la taille de chaque image dans jquery.beforeafter.js) . Avant toute chose, avant même de le télécharger et de l’installer, j’aimerais savoir si ton plugin nécessite d’autres scripts (notamment jquery-ui.min.js). Si oui lesquels ?
Sinon, le billet d’annso qui utilise jquery.beforeafter.js est là. Excellent billet, même pour ceux qui, comme moi, n’utilisent pas Lightroom.
4 De mirovinben -
Franck, je viens de l’installer chez moi en local et, du coup, j’ai la réponse à ma question des dépendances. Le plugin a besoin de, installe et charge automatiquement…
pour un total de 158 Ko…
Il est très beaucoup bien plus facile à utiliser, on peut même l’englober dans un div auquel on peut donner d’autres “enrichissements” comme une bordure et un effet d’ombre.
Par contre il va falloir choisir entre jquery.beforeafter.js et ton plugin. En effet twentytwenty semble désactiver beforeafter. Pas grave puisque ton plugin a ma préférence.
J’ai constaté un bug côté admin (l’état de la case à cocher n’est pas mémorisé, j’ai dû aller dans about:config) et un manque (?) côté traduction (les mentions “before” et “after” s’affichant au survol de l’image mériteraient d’être en français).
J’aime très beaucoup son élégance côté public et sa simplicité d’usage côté insertion dans un billet.
5 De mirovinben -
Heu… C’est encore moi…
Je constate chez moi un effet de bord assez curieux et fort gênant : il n’y a plus mémorisation des coordonnées d’un commentateur dans les champs du formulaire “ajouter un commentaire”. La case à cocher “Se souvenir de moi sur ce blog” reste décochée… ???
6 De Franck -
Merci pour les retours mirovinben, je regarde ça dès que possible.
Au passage, emballer jQuery ne me plaît pas mais celle qui est chargée par défaut côté public est parfois la 1.4.2 (je crois) et est trop ancienne pour pouvoir utiliser ce plugin.
7 De mirovinben -
Franck, je suis très beaucoup bien enthousiasmé par ton plugin et cet enthousiasme me fait flooder (céçakondi ?) ici. Il aurait été sans doute préférable de te contacter par mail.
Concernant jQuery, jquery.beforeafter.js nécessite la présence de jquery-ui.min.js qui pèse à lui seul 182 Ko. Donc on y gagne.
Mais c’est vrai qu’il serait intéressant d’alléger jQuery en ne proposant que ce qui manque à la version proposée par Dotclear (je ne sais pas non plus quelle est sa version). Encore faudrait-il savoir quoi. A moins qu’il soit possible (?) à un sorcier d’améliorer la gestion des scripts jQuery dans notre moteur de blog favori pour faciliter la prise en compte d’extensions de ce type.
Sinon, j’ai modifié ce matin mon billet en remplaçant jquery.beforeafter.jst par ton plugin. Adieu la poignée verte. :-)
8 De Franck -
Une 0.2 à venir bientôt, j’ai fait les corrections idoines.
9 De Franck -
Pour jQuery, je pense qu’il faudra prévoir une option côté thème et gérée côté DC pour le charger et une seule fois.
N’importe quel autre plugin faisant comme celui-ci risque fort de foutre le souk, pour être poli.
Cela dit, je vais peut-être ajouter une option côté administration de ce plugin pour charger (ou pas) jQuery (et l’extension cookie).