Image Magnifying Glass

A free Carrd plugin template for that magnifying glass effect 🔍 on your product images. Requires Pro Standard. Set up tutorial here →

Made by @jasonleowsg ~ Jason's Plugins For Carrd

Zoomable Product

TUTORIAL

Here's how to set up this plugin in your Carrd site:
– Download the template
– Copy the code from the Embed element titled "Image Magnifying Glass"
– Add an Embed element in your Carrd site, set it to Inline - remember to uncheck "Defer script tags"
- Add your image. Look for this code:<img
id="mainImage"
src="https://imagemagnifyingglass.carrd.co/assets/images/image02.jpg"
alt="Zoomable Product"
/>
<div class="lens" id="lens">
<img
src="https://imagemagnifyingglass.carrd.co/assets/images/image02.jpg"
alt=""
/>

Add the direct image URL to the src . You can use the external URL of an image hosted elsewhere, or upload it to your Carrd site and right click to save image address.
- Publish!————————————————————————————————How to adjust the image size:
- Look for this code:<style>
.img-container {
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
border: 10px solid #FFF;
border-radius: 5px;
}
- Adjust the width and height to suit your site.————————————————————————————————How to adjust the size of the magnifying glass lens:
- Look for this code:.lens {
position: absolute;
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 130px; /* Larger lens */
height: 130px;
- Adjust the width and height increase/decrease the size of the magnifying glass lens.————————————————————————————————How to adjust the size of the magnifying glass lens:
- Look for this code:.lens {
position: absolute;
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: 130px; /* Larger lens */
height: 130px;
- Adjust the width and height increase/decrease the size of the magnifying glass lens.————————————————————————————————How to adjust the magnification factor of the magnifying glass lens:
- Look for this code inside the <script> tags:const zoom = 1.5; // magnification factor
- Adjust the value 1.5. Increase it to increase magnification factor.

Zoomable Product
const container2 = document.querySelector('.img-container-2'); const lens2 = document.getElementById('lens-2'); const img2 = document.getElementById('mainImage-2'); const lensImg2 = lens2.querySelector('img'); const zoom2 = 1.5; // magnification factor let targetX2 = 0, targetY2 = 0; let currentX2 = 0, currentY2 = 0; const easing2 = 0.2; // smoothing factor container2.addEventListener('mouseenter', () => { lens2.style.display = 'block'; }); container2.addEventListener('mouseleave', () => { lens2.style.display = 'none'; }); container2.addEventListener('mousemove', (e) => { const rect = container2.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const lensWidth = lens2.offsetWidth / 2; const lensHeight = lens2.offsetHeight / 2; targetX2 = Math.max(0, Math.min(x - lensWidth, rect.width - lens2.offsetWidth)); targetY2 = Math.max(0, Math.min(y - lensHeight, rect.height - lens2.offsetHeight)); }); function animateLens2() { const rect = container2.getBoundingClientRect(); currentX2 += (targetX2 - currentX2) * easing2; currentY2 += (targetY2 - currentY2) * easing2; lens2.style.left = `${currentX2}px`; lens2.style.top = `${currentY2}px`; lensImg2.style.width = `${rect.width * zoom2}px`; lensImg2.style.height = `${rect.height * zoom2}px`; lensImg2.style.left = `${-currentX2 * zoom2}px`; lensImg2.style.top = `${-currentY2 * zoom2}px`; requestAnimationFrame(animateLens2); } animateLens2();