How to create a fully responsive photo and video gallery

Since version 3.1, HTML5 Gallery becomes fully responsive.

To configure the HTML5 Gallery as responsive, you only need to add a data tag to the div:data-responsive="true". When this option is on, the gallery will adjust its width to the full width of its parent container, and change its height according the aspect ratio of the default width and height.

Another option for responsive design is responsivefullscreen. This option is only valid when the option responsive is true.

  • If the option responsive is true, but responsivefullscreen is false, the gallery will change its width to the width of its parent container, but change its height according to the aspect ratio of the default width and height.

  • If both options are true, the gallery will change its width and height to the size of its parent container.This option is useful if you want to create a fullscreen photo and image gallery.