Member Avatar for sgsawant

I have observed on ebay that only 1 large image of a product is displayed and around it a few more thumbnails are displayed. When you click (sometimes hovering does it) one of the thumbnails, the large image is replaced by a large copy of the thumbnail. Effectively you are able to view the object with different perspectives.

How is such a feat achieved? Can you please provide me with examples?

Regards,

-sgsawant

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

— the UI you described is a simple image-swap gallery: a single large display plus selectable thumbnails that replace the main view. was right that client-side code is usually involved, and showed the very basic inline-onclick approach. For a robust solution use semantic markup that works without JavaScript, then add unobtrusive JS for a better UX, plus accessibility and performance features.

A simple, progressive HTML structure (works if JavaScript is disabled):

<figure>
  <img id="mainImage" src="images/large-default.jpg" alt="Product, front view">
</figure>

<ul class="thumbnails">
  <li><a href="images/large1.jpg"><img src="images/thumb1.jpg" alt="Product, side view"></a></li>
  <li><a href="images/large2.jpg"><img src="images/thumb2.jpg" alt="Product, back view"></a></li>
</ul>

Use JS to intercept thumbnail clicks, prevent navigation, update the main image, and manage selected states (keyboard focus, aria attributes). Example event-delegation pattern (keeps markup clean and avoids inline handlers):

document.querySelector('.thumbnails').addEventListener('click', function(e) {
  var link = e.target.closest('a');
  if (!link) return;
  e.preventDefault();
  var main = document.getElementById('mainImage');
  main.src = link.href;
  // update selected class / aria-selected here
});

Practical tips:

  • Preload only the next/likely images (too many preloads wastes bandwidth). Prefer <link rel="preload" as="image"> for critical images.
  • Use srcset / <picture> so large images serve appropriately sized assets for mobile/retina.
  • Lazy-load thumbnails with loading="lazy" and always include width/height (or CSS aspect-ratio) to avoid layout shifts.
  • Make thumbnails keyboard accessible (buttons or anchors), keep alt text meaningful, and expose selection with aria-pressed or aria-selected.
  • Add a CSS fade for smooth swaps and test on throttled networks to balance UX vs. data use.

Further reading: see MDN on Responsive images, Preloading content, and Lazy loading images.

Recommended Answers

All 2 Replies

Member Avatar for almostbob 
<img id='largeimg' src='largeimg0.jpg' style='float:right'>
<img src='smallimage1.jpg' onclick='document.getelementbyid('largeimg').src="largeimg1.jpg";'><br>
<img src='smallimage2.jpg' onclick='document.getelementbyid('largeimg').src="largeimg2.jpg";'><br>
<img src='smallimage3.jpg' onclick='document.getelementbyid('largeimg').src="largeimg3.jpg";'><br>
<img src='smallimage4.jpg' onclick='document.getelementbyid('largeimg').src="largeimg4.jpg";'>

witdh height statements omitted for brevity
together with an image preload script between the </body></html>(after page load) tags to make the large images appear to be instant

</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
largeimage1 = new Image();
largeimage1.src = "";
largeimage2 = new Image();
largeimage2.src = "";
largeimage3 = new Image();
largeimage3.src = "";
largeimage4 = new Image();
largeimage4.src = "";
//-->
//]]>
</script></html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.