Pour comparer 2 images comme une vue avant et après.
{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)
upactionslist (1) image-compare (2) jcontent-info (1)