MediaViewer Component

Unified media viewer with slideshow, zoom, and gallery features

1. Basic Image Gallery

Click any image to open it in the MediaViewer with navigation.


              // Create basic viewer
              const viewer = new MediaViewer();

              // Define images
              const images = [
              'https://picsum.photos/id/10/800/600',
              'https://picsum.photos/id/11/800/600',
              'https://picsum.photos/id/12/800/600',
              'https://picsum.photos/id/13/800/600'
              ];

              // Open gallery on image click
              document.querySelectorAll('#basicGallery .gallery-item').forEach((item, index) => {
              item.onclick = () => viewer.show(images, index);
              });

2. Gallery with Thumbnails

Enable thumbnail strip for easier navigation.


              const thumbViewer = new MediaViewer({
              showThumbnails: true,
              showControls: true
              });

              const galleryImages = [
              { url: 'photo1.jpg', caption: 'Mountain View' },
              { url: 'photo2.jpg', caption: 'Ocean Sunset' },
              { url: 'photo3.jpg', caption: 'Forest Trail' }
              ];

              thumbViewer.show(galleryImages);

3. Auto-play Slideshow

Start an automatic slideshow with customizable interval.


              const slideshowViewer = new MediaViewer({
              autoplay: true,
              interval: 3000, // 3 seconds
              loop: true,
              showThumbnails: true
              });

              slideshowViewer.show(images);

              // Manual control
              slideshowViewer.play(); // Start
              slideshowViewer.stop(); // Stop

4. Mixed Media (Images + YouTube)

Combine different media types in one viewer.


              const mixedViewer = new MediaViewer({
              showThumbnails: true,
              showControls: false // No zoom for mixed content
              });

              mixedViewer.show([
              { type: 'image', url: 'product.jpg', caption: 'Product Photo' },
              { type: 'youtube', url: 'https://www.youtube.com/watch?v=VIDEO_ID' },
              { type: 'image', url: 'detail.jpg', caption: 'Product Detail' }
              ]);

5. Zoom and Pan

Enable zoom for detailed image inspection.

Controls:

  • Mouse Wheel: Scroll to zoom in/out
  • Keyboard: + to zoom in, - to zoom out, 0 to reset
  • Drag: Click and drag to pan when zoomed

              const zoomViewer = new MediaViewer({
              enableZoom: true,
              maxZoom: 4, // Maximum 400%
              zoomStep: 0.5, // 50% per step
              showControls: true
              });

              // Programmatic zoom
              zoomViewer.zoomIn();
              zoomViewer.zoomOut();
              zoomViewer.resetZoom();

6. Event Callbacks

Track user interactions with callback functions.

Event Log:

              const callbackViewer = new MediaViewer({
              showThumbnails: true,

              onShow: (item) => {
              console.log('Viewer opened with:', item);
              },

              onHide: () => {
              console.log('Viewer closed');
              },

              onChange: (item, index) => {
              console.log('Changed to item', index, ':', item);
              }
              });

7. Declarative Gallery (Data Attributes)

No JavaScript required - just add data attributes to your HTML!

Mountain
Lake
Forest
Desert 

<!-- No JavaScript required! -->
<div class="gallery-grid"
     data-media-viewer
     data-show-thumbnails="true"
     data-enable-zoom="true"
     data-max-zoom="4">

  <div class="gallery-item">
    <img src="thumbnail.jpg"
         data-src="full-size.jpg"
         data-caption="Image Description"
         alt="Alt text">
  </div>
  <!-- More items... -->
</div>

Data Attributes Reference

Attribute Type Description
data-media-viewer marker Enable MediaViewer on this container
data-show-thumbnails boolean Show thumbnail navigation strip
data-show-controls boolean Show zoom control buttons
data-enable-zoom boolean Enable zoom functionality
data-max-zoom number Maximum zoom level (e.g., "4" for 400%)
data-autoplay boolean Auto-start slideshow
data-interval number Slideshow interval in milliseconds

Image Element Attributes

Attribute Description
data-src Full-size image URL (falls back to src)
data-caption Caption text (falls back to alt)
data-type Media type: image, video, youtube, iframe

8. Text/HTML Content

MediaViewer supports displaying text and HTML content alongside images and videos.


const viewer = new MediaViewer({ showThumbnails: true });
viewer.show([
  { type: 'image', url: 'photo.jpg', caption: 'Photo' },
  { type: 'text', title: 'About', content: 'This is plain text content...' },
  { type: 'html', content: '<h2>Rich HTML</h2><p>With formatting!</p>' }
]);

Content Types

Type Properties Description
text title, content Plain text display with optional title
html content Rich HTML content (sanitized automatically)

9. API Loading (Demo)

Load media items directly from an API endpoint using data attributes.


<!-- Automatic API loading -->
<div data-media-viewer
     data-api="/api/gallery"
     data-api-method="GET"
     data-show-thumbnails="true">
  <button class="btn">Open Gallery</button>
</div>

API Data Attributes

Attribute Type Description
data-api string API endpoint URL
data-api-method string HTTP method (default: GET)

API Events


const container = document.querySelector('[data-media-viewer]');

container.addEventListener('mediaviewer:loaded', (e) => {
  console.log('Loaded:', e.detail.items);
});

container.addEventListener('mediaviewer:error', (e) => {
  console.log('Error:', e.detail.error);
});

API Reference

Method Description
show(items, startIndex) Open viewer with media items array
hide() Close the viewer
next() / prev() Navigate to next/previous item
goTo(index) Go to specific item by index
play() / stop() Start/stop slideshow auto-play
zoomIn() / zoomOut() Zoom in/out by one step
resetZoom() Reset zoom to 100%
getCurrentItem() Get current media item object
setOptions(options) Update viewer options
destroy() Clean up and remove viewer