➠ image_compare : comparaison de 2 images par déplacement d'un volet DEMO
{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=ombre}