Product Image Gallery with Amazon-like Zoom: 0 to Infinity

0. What We Are Building

A product gallery is the image area you see on e-commerce websites. It usually has small thumbnails, one large selected image, and a zoom feature that helps buyers inspect details.

1. HTML Structure

HTML gives the gallery its skeleton. The important parts are:

• .thumbs — contains thumbnail buttons.
• #ppMainImg — the main selected image.
• #ppLens — the circular magnifying lens.
• #ppResult — the large zoom result box.
• #ppPrev, #ppNext, and #ppFullscreen — control buttons.
• #ppZoom — the zoom power slider.

<div class="thumbs">
  <button data-full="image-1.jpg">
    <img src="image-1.jpg" alt="Thumbnail 1">
  </button>
</div>

<img id="ppMainImg" src="image-1.jpg" alt="Selected product image">
<div id="ppLens"></div>
<div id="ppResult"></div>

2. CSS Design

CSS controls the visual design. In this lesson, we use a light saffron theme, rounded cards, shadows, accessible code colors, and responsive layout.

The main trick

The lens and zoom result are both hidden at first:

.magnify-lens,
.magnify-result {
  display: none;
  background-repeat: no-repeat;
}

When the user hovers or presses the image, JavaScript changes them to display: block.

Why the container is position relative

.magnify-container {
  position: relative;
  overflow: hidden;
}

The lens is placed absolutely inside the image container. That means the lens can follow the pointer while staying inside the image boundary.

3. JavaScript Logic

JavaScript gives life to the gallery. The script does five big jobs:

1. Collect all required elements using document.getElementById.
2. Switch the main image when a thumbnail is clicked.
3. Move the magnifying lens according to pointer position.
4. Calculate the zoom background position.
5. Support keyboard, touch, zoom slider, and fullscreen.

Image switching

function setActive(index) {
  activeIndex = (index + thumbs.length) % thumbs.length;
  const full = thumbs[activeIndex].dataset.full;
  img.src = full;
}

The most important zoom formula

const scaleX = img.naturalWidth / rect.width;
const scaleY = img.naturalHeight / rect.height;

const natX = x * scaleX;
const natY = y * scaleY;

const bgPosX = -(natX * zoom);
const bgPosY = -(natY * zoom);

Try the gallery below. On desktop, hover over the main image. On mobile, press and drag on the image. Use the zoom slider to increase or decrease magnification.

Programmer’s Picnic — Product Gallery

Hover on desktop or press-and-drag on mobile to magnify. Use ← / → keys to change images.

Zoom 3.00×

⟵ Prev Next ⟶ Fullscreen

Tip: On mobile, press & drag. On desktop, simply hover.

5. Code Map

Part A: Data source

Each thumbnail button stores the large image URL in data-full.

<button data-full="https://example.com/product.jpg">
  <img src="https://example.com/product.jpg" alt="Product thumbnail">
</button>

Part B: Selected state

The selected thumbnail uses aria-selected="true". This improves both design and accessibility.

Part C: Pointer math

The pointer gives us clientX and clientY. We subtract the image’s left and top position to get the pointer location inside the image.

const rect = img.getBoundingClientRect();
const cx = e.clientX - rect.left;
const cy = e.clientY - rect.top;

Part D: Boundary control

We clamp the lens position so it cannot move outside the image.

x = Math.max(0, Math.min(x, rect.width - lensW));
y = Math.max(0, Math.min(y, rect.height - lensH));

6. Checkpoints

7. Experiments

8. Infinity Improvements

Once the basic gallery works, you can extend it into a production-level component.

• Load images from a JSON file.
• Add product variants like color, size, and model.
• Add lazy loading for large product collections.
• Add swipe gestures for mobile users.
• Add a modal gallery with next, previous, and close buttons.
• Add structured data for better product SEO.
• Add analytics to track which image users inspect most.
• Turn the gallery into a reusable Web Component.