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="https://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">
    
    

        
        

            
Title
            
Description of the image.
            

                
                
            
            
            Full Size
        
        
        

            
            
yYVz4RPyuDk
            

                
                
            
        
    
</div>

That's all.

Option attributes

• data-ui-load="@lib/components/media_browser" constructor
  load the media_browser component on the element.
• data-ui-context optional
  identifier name to be used to reference this component from JavaScript.

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.