Before/after on your website

The plugin delivers two perfectly normal JPEGs: …_before.jpg and …_after.jpg. The slider you see here on adx.tlbx.cloud is a small piece of HTML, CSS and JavaScript without any library. You can take it as it is — into WordPress, Squarespace, Jimdo or any hand-built site, anywhere you can insert your own HTML.

What it looks like

BEFOREAFTER

‹ ›

Preview with two files from an export with “Two files” — drag or tap, also on the phone.

Onto your site in three steps

1. Export in Lightroom Classic with Before & After, output “Two files”. Upload both files to your website (media library or via FTP).
2. Copy the code below and paste it where the comparison should appear — in WordPress as a “Custom HTML” block, otherwise in the editor’s HTML mode.
3. In the code, replace the two file names bild_before.jpg and bild_after.jpg with the addresses of your uploaded images. Done.

<!-- TLBX AdX Before & After — before/after slider to embed. Two files from the export with “Two files”: --> <div class="adx-vergleich" style="--x:50%"> <img class="adx-vorher" src="bild_before.jpg" alt="Before"> <img class="adx-nachher" src="bild_after.jpg" alt="After"> <span class="adx-etikett adx-l">BEFORE</span><span class="adx-etikett adx-r">AFTER</span> <div class="adx-griff"></div><div class="adx-knauf">‹ ›</div> <input type="range" min="0" max="100" value="50" aria-label="Drag between before and after"> </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>