Informations générales

Ce plugin 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, comme expliqué sur cette page.

Une fois installé il s'active dans les paramètres du blog à l'aide de deux options :

  • 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

Pour l'utiliser, une fois que vous avez préparé les deux photos, avant et après 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>

Si vous souhaitez modifier l'alignement de l'ensemble vous pouvez, à la <div class="twentytwenty-container"> ajouter une seconde classe :

  • twentytwenty-left : pour cadrer à gauche
  • twentytwenty-center : pour centrer
  • twentytwenty-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).

Aperçus

Capture #1

Capture #1

Informations techniques

  • Version du plugin : 4.1
  • Version minimale de Dotclear : 2.28
  • Licence : GNU GPL v2
  • Support : Billet dédié