咨询：点击左侧预览图在主展示框显示对应大图的实现方案

Hey there! I’ve been in your shoes before—trying to get that clickable preview image setup working and hitting a wall with data attributes. Let’s walk through a solid, straightforward implementation that should fix this for you.

First, Let’s Fix the HTML Structure #

The key here is making sure your preview images have a clear way to pass their full-size source to the main display. Instead of relying solely on data-target (which is more commonly used for modals), use a data-src attribute to store the URL of the image you want to show in the main frame. Here’s a clean structure:

<!-- Main Display Area -->
<div class="main-image-container">
  <img id="main-display" src="/path/to/default-image.jpg" alt="Main image display">
</div>

<!-- Preview Thumbnails -->
<div class="preview-container">
  <img class="preview-img" data-src="/path/to/image-1.jpg" src="/path/to/thumbnail-1.jpg" alt="Preview 1">
  <img class="preview-img" data-src="/path/to/image-2.jpg" src="/path/to/thumbnail-2.jpg" alt="Preview 2">
  <img class="preview-img" data-src="/path/to/image-3.jpg" src="/path/to/thumbnail-3.jpg" alt="Preview 3">
</div>

Add Basic CSS (Optional but Helpful) #

Make the preview images look clickable and style the main display to stand out:

.main-image-container {
  width: 600px;
  height: 400px;
  margin-bottom: 20px;
  border: 2px solid #ddd;
}

#main-display {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-container {
  display: flex;
  gap: 10px;
}

.preview-img {
  width: 100px;
  height: 75px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.preview-img:hover {
  border-color: #333;
}

The JavaScript Logic (This is Where It All Comes Together) #

The reason your data-target approach might have failed is likely because you didn’t add the event listener to actually update the main image’s source. Let’s fix that with simple vanilla JS:

// Get all preview images and the main display element
const previewImages = document.querySelectorAll('.preview-img');
const mainDisplay = document.getElementById('main-display');

// Add a click event listener to each preview image
previewImages.forEach(img => {
  img.addEventListener('click', () => {
    // Grab the full-size image URL from the data-src attribute
    const fullSizeSrc = img.getAttribute('data-src');
    // Update the main display's source
    mainDisplay.src = fullSizeSrc;
    // Optional: Update the alt text too for accessibility
    mainDisplay.alt = img.alt.replace('Preview', 'Main');
  });
});

Why Your Previous Attempt Might Have Failed #

If you were using data-target without tying it to an event handler, it won’t do anything on its own—those attributes are just storage for data, not magic triggers. Common pitfalls include:

• Forgetting to add a click event listener to the preview images
• Mismatching the data-target value with the main display’s ID (e.g., data-target="#main-display" but your element has id="mainDisplay")
• Using relative paths incorrectly (double-check that your image URLs point to the right locations)

This setup is lightweight, works without any frameworks, and should do exactly what you need: click a thumbnail, see it in the main big box.

内容的提问来源于stack exchange，提问作者Douggy Budget