An image/video gallery component configurable with minimal HTML code.

Features:

• navigation by onscreen controls, keyboard or gestures
• thumbnails carousel
• images with customizable title/description overlay
• MP4, WebM, and Ogg videos
• youtube videos
• fullscreen mode
• inline / detached mode
• automatic play/pause when entering or going off-screen

Usage

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Add the media list markup

Put inside the field media the markup defining image and video list.

<div z-load="@lib/components/media-browser"
     z-context="media-browser" data-o-inline="true" data-o-slide="5000">

    <!-- List of images/videos (#media container) -->
    <div #media>

        <!-- Example image item -->
        <article>
            <h1 #title>Title</h1>
            <h2 #description>Description of the image.</h2>
            <!-- Image thumbnail url -->
            <img #preview src="https://picsum.photos/400/300/?image=201">
            <!-- Full-size image url -->
            <a #url href="https://picsum.photos/1600/1200/?image=201">Open media</a>
        </article>
  
        <!-- Example video item -->
        <article data-type="video" slide-interval="15000">
          <!-- Video thumbnail url -->
          <img #preview src="sample/images/BigBuckBunny.jpg">
          <!-- video URL -->
          <a #url href="sample/BigBuckBunny.mp4">Open media</a>
        </article>

        <!-- Example YouTube video item -->
        <article data-type="video-yt">
          <!-- Video thumbnail url -->
          <img #preview src="https://img.youtube.com/vi/IdtM6OPdaio/2.jpg">
          <!-- YouTube video URL -->
          <a #url href="https://youtu.be/IdtM6OPdaio">Open media</a>
        </article>

    </div> <!-- end of #media container -->

</div>

That's all.

Example 1 (inline)

Using data-o-inline attribute set to true.

Title

Description of the image.

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Example 2 (detached)

Without the data-o-inline attribute and using the data-o-button option. In this case the media-browser is not visible in the page unless the button is clicked.

Open fullscreen

The Bridge

Tip: navigate with gestures or keyboard arrows.

Open media

Highway

Tip: hit space bar or tap to toggle overlay.

Open media

Wonders

Tip: not just pics, YT videos too (see next).

Open media

Open media

Beams of light

Tip: video play/pause on focus/blur.

Open media

Nature

Tip: only minimal HTML needed to setup this gallery.

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Open media

Multiple instances of the media-browser are allowed on the same page.

Option attributes

• z-load="@lib/components/media-browser" constructor
  load the media-browser component on the element.
• z-context optional
  identifier name to be used to access this component from JavaScript.
• data-o-inline optional
  if set to true, the media browser will be displayed inline rather than detached. The default value is false and
  the media-browser will open only programmatically in fullscreen.
• data-o-slide optional
  enables auto-slide mode. The value of the attribute indicates the amount of milliseconds to pause between each slide.
  A different sliding interval can be specified for each item by adding the slide-interval attribute on the item
  with the amount of milliseconds to wait before next slide.
• data-o-button optional
  The <button_name> associated to the element that will open the media-browser when clicked. The attribute
  z-field="<button_name>" must be added to the button element. Only works in detached mode (not inline).

Scripting

The media-browser component can also be controlled with JavaScript.

Get a reference to the media browser object

var mediaBrowser;
zuix.context('media-browser', (mb) => {

  // store a global reference of the
  // component for eventual later use
  mediaBrowser = mb;

  // open the media browser
  mediaBrowser.open();

});

Methods

// show the media browser
mediaBrowser.open();
// hide the media browser
mediaBrowser.close();
// get the current page
let currentPage = mediaBrowser.current();
// set the current page
mediaBrowser.current(4);
// go to the previous page
mediaBrowser.prev();
// go to the next page
mediaBrowser.next();
// show/hide/toggle controls overlay
mediaBrowser.showControls();
mediaBrowser.hideControls();
mediaBrowser.toggleControls();
// set fullscreen mode
mediaBrowser.fullScreen(true);

Events

mediaBrowser.on({
  'open': (e) => { /* ... */ },
  'close': (e) => { /* ... */ },
  'fullscreen:open': (e) => { /* ... */ },
  'fullscreen:close': (e) => { /* ... */ },
  'controls:hide': (e) => { /* ... */ },
  'controls:show': (e) => { /* ... */ },
  'page:change': (e, pageInfo) => { /* ... */ },
  'refresh:active': (e, pageInfo) => { /* ... */ },
  'refresh:inactive': (e, pageInfo) => { /* ... */ }
});