<button id="btn-gallery-overlay" class="btn btn-primary">
  Gallery overlay <span class="icon icon--image"></span>
</button>
<!-- Modal -->
<div id="gallery-overlay-background">
  <div class="gallery-overlay__wrapper">
  <!-- Overlayer -->
    <div class="gallery-overlay" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="gallery-overlay__close-wrapper">
        <a href="#" class="gallery-overlay__close" title="Close">
          <span class="ui-button-text">Close</span>
          <i class="ui-button-icon-primary"></i>
        </a>
      </div>
      <!-- Media area -->
      <div class="gallery-overlay__media">
        <div class="gallery-overlay__media-previous">
          <a href="#" title="Previous"><span class="sr-only">Previous</span></a>
        </div>

        <div class="gallery-overlay__media-item-list__wrapper">
          <ul class="gallery-overlay__media-item-list">
            <li class="gallery-overlay__media-item active">
              <img class="img-responsive" src="https://picsum.photos/600/1200" alt=""/>
            </li>
            <li class="gallery-overlay__media-item">
              <img class="img-responsive" src="https://picsum.photos/1200/620" alt=""/>
            </li>
            <li class="gallery-overlay__media-item">
              <img class="img-responsive" src="https://picsum.photos/800/800" alt=""/>
            </li>
            <li class="gallery-overlay__media-item">
              <div class="file--video">
                <div class="file__container">
                  <iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/xqjkfz?autoPlay=0" allowfullscreen=""></iframe>
                </div>
              </div>
            </li>
            <li class="gallery-overlay__media-item">
              <div class="file--video">
                <div class="file__container">
                  <iframe src="https://player.vimeo.com/video/236584808?color=ebf490&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
              </div>
            </li>
            <li class="gallery-overlay__media-item">
              <img class="img-responsive" src="https://picsum.photos/960/1200" alt=""/>
            </li>
          </ul>
        </div>

        <div class="gallery-overlay__media-next">
          <a href="#" title="Next"><span class="sr-only">Next</span></a>
        </div>
      </div>

      <div class="gallery-overlay__sidebar">
        <div class="gallery-overlay__sidebar__content">

          <div class="gallery-overlay__meta">
            <span class="gallery-overlay__count">2 / 15</span>
            <span class="gallery-overlay__download">
              <a href="#" title="Download">Download</a>
            </span>
            <span class="gallery-overlay__share">
              <a href="#" title="Share">Share</a>
            </span>
          </div>

          <div class="gallery-overlay__description">
            <p>Nulla consequat massa quis enim. Donec pede justo.</p>
            <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt. <a href="#" title="Cras dapibus">Cras dapibus</a>. Vivamus elementum semper nisi.</p>
          </div>

          <span class="gallery-overlay__copyright">
            &copy; Copyright holder, Author name, License type
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
jQuery(document).ready(function() {
  jQuery('#btn-gallery-overlay').click(function (event) {
    event.preventDefault();
    jQuery('#gallery-overlay-background').show();
  });

  jQuery(window).resize(function () {
    jQuery('#gallery-overlay').dialog('option', 'position', {my: 'center', at: 'center', of: window});
  });

  jQuery('.gallery-overlay__media-next a').click(function (event) {
    event.preventDefault();
    var index = jQuery(this).parent().prev().find('.active').index(),
        $element = jQuery('.gallery-overlay__media-item');
    if ($element.size() > index + 1) {
      $element.eq(index).removeClass('active');
      $element.eq(index + 1).addClass('active');
    }
  });

  jQuery('.gallery-overlay__media-previous a').click(function (event) {
    event.preventDefault();
    var index = jQuery(this).parent().next().find('.active').index();
    if (index > 0) {
      var $element = jQuery('.gallery-overlay__media-item');
      $element.eq(index).removeClass('active');
      $element.eq(index - 1).addClass('active');
    }
  });

  jQuery('.gallery-overlay__close').click(function (event) {
    jQuery('#gallery-overlay-background').hide();
  });

  jQuery(document).keydown(function(e) {
    // Close Gallery Overlay when ESC key pressed.
    if (e.keyCode == 27 && jQuery('a.gallery-overlay__close').length) {
      jQuery('a.gallery-overlay__close').trigger('click');
    }
  });
});
</script>