Member Avatar for bratislav

Please help. I want to put scrolling thumbs in horizontal area, each thumb should be open on mouse over in upper area for eg. 470px x 300px. Any help, thanks in advance.

  • 2 Contributors
  • 2 Replies
  • 113 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by bratislav

Dani AI

Generated

wanted a horizontal scroller whose thumbnails show a larger preview (about 470x300) on mouseover. pointed to plugin roundups as a quick option; that can work, but a small custom implementation often gives better control over image sizes, accessibility, and mobile behavior.

Keep the preview area fixed to 470x300 to avoid layout shift, and make each thumbnail a real control (a button) so keyboard users can focus it. Store the full preview URL in a data-preview attribute and preload on mouseenter/focus with a lightweight Image() object to avoid flicker. Update a visually-hidden text node with the preview image alt text and expose it via aria-live so screen readers notice changes. For mobile, rely on click/touch (not hover) and provide a default preview for the first item.

Example (structure + minimal JS preload and handlers):

<div id="preview" style="width:470px;height:300px" role="region" aria-live="polite">
  <img id="previewImg" src="placeholder.jpg" alt="Preview" width="470" height="300">
  <span id="previewDesc" class="visually-hidden"></span>
</div>

<div class="thumbs" style="overflow-x:auto;white-space:nowrap">
  <button class="thumb" data-preview="previews/p1.jpg">
    <img src="thumbs/t1.jpg" alt="Image 1" width="80" height="60">
  </button>
  <!-- more buttons -->
</div>

<script>
const previewImg = document.getElementById('previewImg');
const previewDesc = document.getElementById('previewDesc');
document.querySelectorAll('.thumb').forEach(btn => {
  const show = () => {
    const url = btn.dataset.preview;
    const img = new Image();
    img.onload = () => previewImg.src = url;
    img.src = url;
    previewDesc.textContent = btn.querySelector('img').alt || '';
  };
  btn.addEventListener('mouseenter', show);
  btn.addEventListener('focus', show);
  btn.addEventListener('click', show);
});
</script>

Key cautions: serve preview images sized to ~470x300 (or use srcset/sizes) to save bandwidth, do not rely on hover-only interactions (mobile/touch), and ensure alt text and keyboard focusability for accessibility. If advanced gestures, inertia scrolling, or lazy-loading optimizations are required, consider a proven gallery/slider library instead of reinventing every feature.

Recommended Answers

All 2 Replies

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.