<div class="p-2">
  <div class="container">
    <ul class="row list-unstyled m-n2">
      <li class="col-6 col-sm-4 p-2">
        <a href="https://source.unsplash.com/1440x810/?cat&sig=0" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://source.unsplash.com/1440x810/?cat&sig=0" alt="...">
          </figure>
        </a>
      </li>
      <li class="col-6 col-sm-4 p-2">
        <a href="https://source.unsplash.com/1440x810/?cat&sig=1" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://source.unsplash.com/1440x810/?cat&sig=1" alt="...">
          </figure>
        </a>
      </li>
      <li class="col-6 col-sm-4 p-2">
        <a href="https://source.unsplash.com/1440x810/?cat&sig=2" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://source.unsplash.com/1440x810/?cat&sig=2" alt="...">
          </figure>
        </a>
      </li>
      <li class="col-6 col-sm-4 p-2">
        <a href="https://source.unsplash.com/1440x810/?cat&sig=3" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://source.unsplash.com/1440x810/?cat&sig=3" alt="...">
          </figure>
        </a>
      </li>
      <li class="col-6 col-sm-4 p-2">
        <a href="https://source.unsplash.com/1440x810/?cat&sig=4" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://source.unsplash.com/1440x810/?cat&sig=4" alt="...">
          </figure>
        </a>
      </li>
      <li class="col-6 col-sm-4 p-2">
        <a href="https://www.youtube.com/embed/9c7N0NMNZAU?autoplay=1" data-fancybox="gallery" class="btn btn-primary d-block p-0 border-0">
          <figure class="embed-responsive embed-responsive-16by9 mb-0 bg-light">
            <img class="embed-responsive-item" src="https://img.youtube.com/vi/9c7N0NMNZAU/sddefault.jpg"
                  alt="Gallery 1">
          </figure>
        </a>
      </li>
    </ul>
  </div>
</div>
$(function() {
  function doFancyboxFunctions(event) {
    var loadFancybox = function() {
      if ($("#fancybox-css").length < 1) {
        //load css
        var head = document.getElementsByTagName("head")[0];
        var link = document.createElement("link");
        link.id = "fancybox-css";
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"; //"/assets/css/fancybox.css";
        link.media = "all";
        $(head).prepend(link);
      }

      if ($("#fancybox-js").length < 1) {
        //load script
        var resource = document.createElement("script");
        resource.async = "true";
        resource.src = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"; //"/assets/js/fancybox.js";
        resource.id = "fancybox-js";
        var script = document.getElementsByTagName("script")[0];
        script.parentNode.insertBefore(resource, script);
      }
    };

    var setupFancybox = function() {
      $("[data-fancybox]").fancybox();
    };

    var isFancyboxLoaded = function() {
      return $("html").hasClass("fancybox-css-loaded") && $("html").hasClass("fancybox-js-loaded");
    };

    var startFancybox = function() {
      $("html").addClass("fancybox-is-loaded");

      //nepokracuj pokud css nebo js neni nacteny
      setupFancybox();
      if (event && event.type === "click") {
        $(event.target).click();
        $(window).resize();
      }
      return true;
    };

    if (event && event.type === "click" && isFancyboxLoaded() === false) event.preventDefault();

    if (!isFancyboxLoaded()) {
      loadFancybox();

      $("#fancybox-css").on("load", function() {
        $("html").addClass("fancybox-css-loaded");
        if (isFancyboxLoaded()) startFancybox();
      });

      $("#fancybox-js").on("load", function() {
        $("html").addClass("fancybox-js-loaded");
        if (isFancyboxLoaded()) startFancybox();
      });
    }
  }

  $("[data-fancybox]").one("click mouseenter", function(event) {
    doFancyboxFunctions(event);
  });

  //pokud existuje hash po nacteni stranky
  if (window.location.hash) {
    var hash = window.location.hash.substr(1);
    var getFancyboxSelector = function () {
      var selector = hash.split('-');
      selector.pop();

      return selector.join('-');
    };
    //najdi elementy, ktere by mohly odpovidat fancybox elementum
    var fancyboxElementsWithCurrentHash = $('[data-fancybox^="' + getFancyboxSelector() + '"]');
    //pokud takove elementy existuji nacti fancybox a otevri prislusny objekt
    if (fancyboxElementsWithCurrentHash.length > 0) doFancyboxFunctions();
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js