About FarajmedWho we are?About us

.panzoom { touch-action: none; cursor: grab; } .panzoom:active { cursor: grabbing; } /* Creating the merged border effect */ .merged-container { filter: drop-shadow(0 20px 25px rgba(0,0,0,0.15)); } .circle-frame { border: 10px solid white; background: white; } /* Smoothen the join between the two circles */ .overlap-adjustment { margin-top: -80px; margin-left: 40px; } function initPanZoom(img) { let scale = 1.1; // Start slightly zoomed for better panning feel let tx = 0, ty = 0; const MIN = 1, MAX = 5; const pointers = new Map(); let startDist = 0; let startScale = 1; let dragging = false; let startX = 0, startY = 0; let startTx = 0, startTy = 0; function apply() { img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; } const viewport = img.closest(".panzoom"); viewport.addEventListener("pointerdown", (e) => { viewport.setPointerCapture(e.pointerId); pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.size === 1) { dragging = true; startX = e.clientX; startY = e.clientY; startTx = tx; startTy = ty; } else if (pointers.size === 2) { dragging = false; const pts = [...pointers.values()]; startDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y); startScale = scale; } }); viewport.addEventListener("pointermove", (e) => { if (!pointers.has(e.pointerId)) return; pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.size === 1 && dragging) { tx = startTx + (e.clientX - startX); ty = startTy + (e.clientY - startY); apply(); } else if (pointers.size === 2) { const pts = [...pointers.values()]; const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y); scale = Math.min(MAX, Math.max(MIN, startScale * (dist / startDist))); apply(); } }); const end = (e) => { pointers.delete(e.pointerId); if (pointers.size { e.preventDefault(); const delta = e.deltaY > 0 ? 0.9 : 1.1; scale = Math.min(MAX, Math.max(MIN, scale * delta)); apply(); }, { passive: false }); apply(); } document.querySelectorAll("img[data-panzoom]").forEach(initPanZoom);