Member Avatar for HelenLF

Can anyone suggest a responsive gallery which has a main slideshow with auto generated thumbnails and allows for captions?

  • 4 Contributors
  • 3 Replies
  • 196 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

A compact, maintainable pattern for a responsive slideshow with auto-generated thumbnails and captions. This approach complements the plugin suggestions from , and by showing a lightweight, accessible solution that emphasizes performance and predictable markup (good when the thread reader needs a small custom gallery rather than a heavy plugin).

<!-- hidden slide data, visible viewer and thumbnail container -->
<div class="gallery">
  <div class="viewer">
    <img id="main" alt="">
    <div id="caption" class="caption"></div>
  </div>

  <div id="thumbs" class="thumbs" role="list"></div>

  <ul id="slides" style="display:none">
    <li data-src="images/photo1-large.jpg" data-thumb="images/photo1-thumb.jpg" data-caption="Beach, sunrise"></li>
    <li data-src="images/photo2-large.jpg" data-thumb="images/photo2-thumb.jpg" data-caption="City skyline"></li>
    <li data-src="images/photo3-large.jpg" data-thumb="images/photo3-thumb.jpg" data-caption="Forest path"></li>
  </ul>
</div>

<script>
const slides = document.querySelectorAll('#slides li');
const thumbs = document.getElementById('thumbs');
const main = document.getElementById('main');
const caption = document.getElementById('caption');

slides.forEach((li, i) => {
  const t = document.createElement('img');
  t.src = li.dataset.thumb || li.dataset.src;
  t.alt = li.dataset.caption || '';
  t.loading = 'lazy';
  t.tabIndex = 0;
  t.className = 'thumb';
  t.addEventListener('click', () => {
    main.src = li.dataset.src;
    main.alt = t.alt;
    caption.textContent = li.dataset.caption || '';
    document.querySelectorAll('.thumb').forEach(x => x.classList.remove('active'));
    t.classList.add('active');
  });
  t.addEventListener('keydown', e => { if(e.key === 'Enter' || e.key === ' ') t.click(); });
  thumbs.appendChild(t);
  if(i === 0) t.click();
});
</script>

Notes and quick tips:

  • Use server-generated thumbnail files (data-thumb) to avoid double-loading large images; for retina, provide 2x thumbs via srcset.
  • Keep thumbnails in a horizontally scrollable flex row on small viewports (CSS: .thumbs { display:flex; overflow-x:auto; }) and hide or collapse them on very narrow screens if needed.
  • Accessibility: set role="list" on the thumbs container, give each thumb tabindex="0", update aria-selected on the active thumbnail, and expose the caption to screen readers (the visible caption element is fine if updated synchronously).
  • Performance: add loading="lazy" to thumbs, preload the next/previous large image with new Image() to reduce perceived flicker, and prefer pre-resized images from the server for bandwidth savings.

This pattern covers the core request (responsive main slide, auto thumbnails, captions) while remaining easy to adapt or replace with a full-featured slider if advanced transitions or video support become necessary.

Recommended Answers

All 3 Replies

Member Avatar for mattster

Personally my favorite is: WOW Slider, but Slippery is also pretty good.

WOW will do everything, plus extras like animations and stuff and comes with tons of different designs and styles tp choose from. Amazing when resized. COOL.

But here are some other examples:

Edited by mattster
Member Avatar for pritaeas

I can recommend HighSlide

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.