frendeitpt

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 - Juillet 2017 license GNU/GPLv3 credit script de Sylvain Combes tags image
  • image_compare: aucun argument nécessaire
  • class: classe(s) pour le bloc
  • style: style inline pour le bloc
  • 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}