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://ipfs.konubinix.eu/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://ipfs.konubinix.eu/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="https://ipfs.konubinix.eu/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/plugins/zoom/lg-zoom.min.js"></script>
    <script src="https://ipfs.konubinix.eu/bafybeienkask232t4fjhrscwrae4tfc7dtnxuarxsfbbk36vhktyl3dwdi/plugins/fullscreen/lg-fullscreen.min.js"></script>
    <script src="https://ipfs.konubinix.eu/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://ipfs.konubinix.eu/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/001.jpg",
                  thumb:
                  "https://ipfs.konubinix.eu/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/001.jpg",
          },
          {
                  src:
                  "https://ipfs.konubinix.eu/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/002.jpg",
                  thumb:
                  "https://ipfs.konubinix.eu/bafybeiew2eaq46hfukk3guhqc5jxr6wioatij4ljrjvu6q2j6d4srg2xby/002.jpg",
          },
]

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

</body>