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 1.0 - Juillet 2017 license GNU/GPLv3 credit script de Sylvain Combes
  • image_compare:
  • class: classe bloc
  • style: style inline bloc
  • initVisibleRatio = 0.2: position initiale
  • interactionMode = drag: mode: drag, mousemove, click
  • addSeparator = true: ajoute séparateur (ligne verticale)
  • addDragHandle = true: ajoute poignee sur séparateur
  • animationDuration = 450: Duree animation en ms
  • animationEasing = linear: animation: linear, swing
  • precision = 2: Precision rapport, nb decimales

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

    {up imagecompare}
    <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}