Media Browser

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


  • 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


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=""></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 -->
<h1 #title>Title</h1>
<h2 #description>Description of the image.</h2>
<!-- Image thumbnail url -->
<img #preview src="">
<!-- Full-size image url -->
<a #url href="">Open media</a>

<!-- 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>

<!-- Example YouTube video item -->
<article data-type="video-yt">
<!-- Video thumbnail url -->
<img #preview src="">
<!-- YouTube video URL -->
<a #url href="">Open media</a>

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


That's all.

Example 1 (inline)

Using data-o-inline attribute set to true.

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


Tip: hit space bar or tap to toggle overlay.

Open media


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

Open media

Beams of light

Tip: video play/pause on focus/blur.

Open media


Tip: only minimal HTML needed to setup this gallery.

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).


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;



// show the media browser;
// hide the media browser
// get the current page
let currentPage = mediaBrowser.current();
// set the current page
// go to the previous page
// go to the next page;
// show/hide/toggle controls overlay
// set fullscreen mode


'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) => { /* ... */ }
arrow_left  Previous
zKit components v1.1.1
web enhancing bits