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}

 

IMPORTANT : Décocher Lazyload

 

Si vous utilisez la fonction "média" de Joomla, il est impératif de désélectionner l'option "Images chargées progressivement (lazyload)" pour toutes les images de l'article

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