Une nouvelle version de ce plugin, qui permet de fournir un effet avant/après pour deux photos, suite aux retours constructifs fournis ce matin par mirovinben. Ce plugin utilise le plugin TwentyTwenty (distribué sous licence MIT).
Activation et utilisation
Une fois installé il s’active dans les paramètres du blog :
La première option permet de l’activer.
La seconde permet de faire charger Jquery (et l’extension jquery.cookie
) si votre thème ou aucun de vos autres plugins actifs sur ce blog ne le fait. J’ai également remarqué que la version jQuery livrée avec le thème par défaut était trop ancienne pour pouvoir utiliser le présent plugin[1]. Dans ce cas il faut également cocher cette case.
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[2] 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 mirovinben -
Et ça fonctionne impeccablement. \o/
2 De Sylvain -
Mais il est magnifique ce plugin !!
Merci Franck :)
3 De Obni -
Classieux ce plugin !
4 De Franck -
Eh bien tant mieux s’il vous plaît, vous m’en voyez fort ravi !