Konubinix' opinionated web of thoughts

Creating a Simple Gallery From a Bunch of Photos

Fleeting

creating a simple gallery from a bunch of photos

<!doctype html><html lang=en-us>
  <head>
    <link type="text/css" rel="stylesheet" href="https://konubinix.eu/ipfs/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/css/lightgallery-bundle.css" />
    <style>
      body {
          margin: 0;
          padding: 40px;
      }

      .gallery-items {
          float: left;
          position: relative;
          cursor: pointer;
          span {
              position: absolute;
              left: 50%;
              top: 50%;
              z-index: 10;
              color: #fff;
              font-size: 40px;
              transform: translate3d(-50%, -50%, 0);
          }
      }
    </style>
  </head>

  <body>
    <!-- got from https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0-beta.0/ -->
    <script src="https://konubinix.eu/ipfs/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="https://konubinix.eu/ipfs/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/plugins/zoom/lg-zoom.min.js"></script>
    <script src="https://konubinix.eu/ipfs/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/plugins/fullscreen/lg-fullscreen.min.js"></script>
    <script src="https://konubinix.eu/ipfs/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/plugins/thumbnail/lg-thumbnail.min.js"></script>

    <div id="gallery-container">
    </div>

<script>
  const $dynamicGallery = document.getElementById("gallery-container");
  const dynamicGallery = window.lightGallery($dynamicGallery, {
      dynamic: true,
      swipeToClose: false,
      plugins: [lgZoom, lgFullscreen, lgThumbnail],

dynamicEl: [
      {
          src:
          "https://konubinix.eu/ipfs/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/001.jpg",
          thumb:
          "https://konubinix.eu/ipfs/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/001.jpg",
      },
      {
          src:
          "https://konubinix.eu/ipfs/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/002.jpg",
          thumb:
          "https://konubinix.eu/ipfs/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/002.jpg",
      },
]

      });
      dynamicGallery.openGallery();
      </script>

</body>