Vorher/Nachher auf deiner Webseite

Das Plugin liefert zwei ganz normale JPEGs: …_before.jpg und …_after.jpg. Der Schieber, den du hier auf adx.tlbx.cloud siehst, ist ein kleines Stück HTML, CSS und JavaScript ohne Bibliothek. Du kannst es so übernehmen — in WordPress, Squarespace, Jimdo oder jede handgebaute Seite, überall dort, wo du eigenen HTML-Code einfügen kannst.

So sieht es aus

VORHERNACHHER

‹ ›

Vorschau mit zwei Dateien aus einem Export mit „Zwei Dateien“ — ziehen oder tippen, auch am Handy.

In drei Schritten auf deine Seite

1. In Lightroom Classic mit Before & After exportieren, Ausgabe „Zwei Dateien“. Beide Dateien auf deine Webseite hochladen (Mediathek oder per FTP).
2. Den Code unten kopieren und an der Stelle einfügen, wo der Vergleich stehen soll — in WordPress als Block „Individuelles HTML“, sonst im HTML-Modus des Editors.
3. Im Code die beiden Dateinamen bild_before.jpg und bild_after.jpg durch die Adressen deiner hochgeladenen Bilder ersetzen. Fertig.

<!-- TLBX AdX Before & After — Vorher/Nachher-Schieber zum Einbetten. Zwei Dateien aus dem Export mit „Zwei Dateien“: -->
<div class="adx-vergleich" style="--x:50%">
  <img class="adx-vorher" src="bild_before.jpg" alt="Vorher">
  <img class="adx-nachher" src="bild_after.jpg" alt="Nachher">
  <span class="adx-etikett adx-l">VORHER</span><span class="adx-etikett adx-r">NACHHER</span>
  <div class="adx-griff"></div><div class="adx-knauf">‹ ›</div>
  <input type="range" min="0" max="100" value="50" aria-label="Vorher und Nachher verschieben">
</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>