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

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="//zuixjs.github.io/zuix/js/zuix.min.js"></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"
    data-ui-context="media-browser">
    
    
dzvM0M6lRfI
</div>

That's all.

Option attributes

Scripting

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
    mediaBrowser.open();
});

Programmatically show/hide

// show the media browser
mediaBrowser.open();
// hide the media browser
mediaBrowser.close();

Example

Edit live this example on Glitch.

Source code

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