image-Compare ~ comparaison de 2 images

Pour comparer 2 images comme une vue avant et après.

🆙 image_compare : comparaison de 2 images par déplacement d'un volet

Cliquer pour lire la documentation

{up imagecompare}
< img src="/avant.jpg" >
< img src="/apres.jpg" >
{/up imagecompare}
@author: lomart @version: UP-0.9 @license: GNU/GPLv3 @credit: script de Sylvain Combes @tags: image
  • image_compare: aucun argument nécessaire

Style CSS

  • id: Identifiant
  • class: classe(s) pour le bloc
  • style: style inline pour le bloc

paramètres Javascript pour la configuration

  • initVisibleRatio = 0.2: position initiale
  • interactionMode = drag: mode: drag, mousemove, click
  • addSeparator = 1: ajoute séparateur (ligne verticale)
  • addDragHandle = 1: ajoute poignée sur séparateur
  • animationDuration = 450: durée animation en ms
  • animationEasing = linear: animation: linear, swing
  • precision = 2: précision rapport, nb decimales

Sur un script de https://github.com/sylvaincombes/jquery-images-compare

{up image-compare}
<p><img src="/images/photos/Civita-di-Bagnoregio-Italie.jpg" alt="" /></p>
<p><img src="/images/photos/Tulfes--Tyrol-Autriche.jpg" alt="" /></p>
{/up image-compare}

On indique les 2 images entre le shortcode ouvrant et fermant

Les mêmes images mais ajoutant les paramétres :

{up image-compare | style=border:3px solid red;border-radius:30px;width:50% | class=ombreMax}

 

Pour info, cette page utilise 4 action(s) :
upactionslist (1) image-compare (2) jcontent-info (1)
Détails