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


1. Include zUIx library

Add the following line, preferably inside the head section of 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 data-ui-load="@lib/components/media_browser"

That's all.

Option attributes


Get a reference to the media browser object

var mediaBrowser;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('media-browser', function () {
    // store a global reference of the
    // component for eventual later use
    mediaBrowser = this;
    // open the media browser;

Programmatically show/hide

// show the media browser;
// hide the media browser


Edit live this example on Glitch.

Source code

Source code is available in the lib/components folder of zKit repository.