Avant/après sur votre site

Le plugin fournit deux JPEG tout à fait ordinaires : …_before.jpg et …_after.jpg. Le curseur que vous voyez ici sur adx.tlbx.cloud est un petit morceau de HTML, CSS et JavaScript sans bibliothèque. Vous pouvez le reprendre tel quel, dans WordPress, Squarespace, Jimdo ou tout site fait main, partout où vous pouvez insérer votre propre HTML.

À quoi cela ressemble

AVANTAPRÈS

‹ ›

Aperçu avec deux fichiers issus d’un export « Deux fichiers » : faites glisser ou touchez, aussi sur le téléphone.

Sur votre site en trois étapes

1. Exportez dans Lightroom Classic avec Before & After, sortie « Deux fichiers ». Téléversez les deux fichiers sur votre site (médiathèque ou FTP).
2. Copiez le code ci-dessous et collez-le à l’endroit où la comparaison doit apparaître : dans WordPress en bloc « HTML personnalisé », sinon en mode HTML de l’éditeur.
3. Dans le code, remplacez les deux noms de fichiers bild_before.jpg et bild_after.jpg par les adresses de vos images téléversées. C’est tout.

<!-- TLBX AdX Before & After — curseur avant/après à intégrer. Deux fichiers issus de l’export « Deux fichiers » : --> <div class="adx-vergleich" style="--x:50%"> <img class="adx-vorher" src="bild_before.jpg" alt="Avant"> <img class="adx-nachher" src="bild_after.jpg" alt="Après"> <span class="adx-etikett adx-l">AVANT</span><span class="adx-etikett adx-r">APRÈS</span> <div class="adx-griff"></div><div class="adx-knauf">‹ ›</div> <input type="range" min="0" max="100" value="50" aria-label="Faire glisser entre avant et après"> </div> <style> .adx-vergleich{position:relative;max-width:1200px;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:3/2;user-select:none;touch-action:none} .adx-vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .adx-vergleich .adx-nachher{clip-path:inset(0 0 0 var(--x,50%))} .adx-vergleich .adx-griff{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none} .adx-vergleich .adx-knauf{position:absolute;top:50%;left:var(--x,50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#111;transform:translate(-50%,-50%);display:grid;place-items:center;font:700 15px/1 sans-serif;pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.45)} .adx-vergleich .adx-etikett{position:absolute;top:14px;background:rgba(12,16,20,.72);color:#fff;font:700 12px/1 sans-serif;letter-spacing:.12em;padding:7px 10px;border-radius:999px;pointer-events:none} .adx-vergleich .adx-l{left:14px}.adx-vergleich .adx-r{right:14px} .adx-vergleich input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize} </style> <script> document.querySelectorAll('.adx-vergleich').forEach(function(sl){ var rg=sl.querySelector('input[type=range]'); function setz(v){ v=Math.max(0,Math.min(100,v)); sl.style.setProperty('--x',v+'%'); rg.value=v; } rg.addEventListener('input',function(){ setz(+rg.value); }); function ausEvent(e){ var r=sl.getBoundingClientRect(); setz((e.clientX-r.left)/r.width*100); } var aktiv=false; sl.addEventListener('pointerdown',function(e){ aktiv=true; sl.setPointerCapture(e.pointerId); ausEvent(e); }); sl.addEventListener('pointermove',function(e){ if(aktiv) ausEvent(e); }); sl.addEventListener('pointerup',function(){ aktiv=false; }); sl.addEventListener('pointercancel',function(){ aktiv=false; }); }); </script>