Search code examples
javascriptlightgallery

lightgallery not showing correctly in fullscreen popup

I create a gallery like this.

enter image description here

Then initialize the lightGallery and this is how it shows up.

enter image description here

Any idea why?

Edit:

Added Snippet, as you can see the thumbnails bar is on the left as a column instead of on the bottom like in this working example https://codepen.io/AquaMay/pen/PoPzNjB

It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css">
    <style>
      #lightGallery img {
        height: 75px;
      }
      #lightGallery a {
        text-decoration: none;
        color: black;
      }
    </style>
  </head>
  <body>
    <div id="lightGallery">
      <a href="https://picsum.photos/1080/720?random=1">
        <img src="https://picsum.photos/1080/720?random=1" />
      </a>

      <a href="https://picsum.photos/1080/720?random=2">
        <img src="https://picsum.photos/1080/720?random=2" />
      </a>

      <a href="https://picsum.photos/1080/720?random=3">
        <img src="https://picsum.photos/1080/720?random=3" />
      </a>

      <a href="https://picsum.photos/1080/720?random=4">
        <img src="https://picsum.photos/1080/720?random=4" />
      </a>

      <a href="https://picsum.photos/1080/720?random=5">
        <img src="https://picsum.photos/1080/720?random=5" />
      </a>

      <a href="https://picsum.photos/1080/720?random=6">
        <img src="https://picsum.photos/1080/720?random=6" />
      </a>

      <a href="https://picsum.photos/1080/720?random=7">
        <img src="https://picsum.photos/1080/720?random=7" />
      </a>

      <a href="https://picsum.photos/1080/720?random=8">
        <img src="https://picsum.photos/1080/720?random=8" />
      </a>

      <a href="https://picsum.photos/1080/720?random=9">
        <img src="https://picsum.photos/1080/720?random=9" />
      </a>

      <a href="https://picsum.photos/1080/720?random=10">
        <img src="https://picsum.photos/1080/720?random=10" />
      </a>

      <a href="https://picsum.photos/1080/720?random=11">
        <img src="https://picsum.photos/1080/720?random=11" />
      </a>

      <a href="https://picsum.photos/1080/720?random=12">
        <img src="https://picsum.photos/1080/720?random=12" />
      </a>

      <a href="https://picsum.photos/1080/720?random=13">
        <img src="https://picsum.photos/1080/720?random=13" />
      </a>

      <a href="https://picsum.photos/1080/720?random=14">
        <img src="https://picsum.photos/1080/720?random=14" />
      </a>

      <a href="https://picsum.photos/1080/720?random=15">
        <img src="https://picsum.photos/1080/720?random=15" />
      </a>

      <a href="https://picsum.photos/1080/720?random=16">
        <img src="https://picsum.photos/1080/720?random=16" />
      </a>

      <a href="https://picsum.photos/1080/720?random=17">
        <img src="https://picsum.photos/1080/720?random=17" />
      </a>

      <a href="https://picsum.photos/1080/720?random=18">
        <img src="https://picsum.photos/1080/720?random=18" />
      </a>

      <a href="https://picsum.photos/1080/720?random=19">
        <img src="https://picsum.photos/1080/720?random=19" />
      </a>

      <a href="https://picsum.photos/1080/720?random=20">
        <img src="https://picsum.photos/1080/720?random=20" />
      </a>
    </div>
    <script type="module">
      import lightGallery from "https://cdn.skypack.dev/pin/lightgallery@v2.0.0-beta.4-flTmGp4UDZ7xjie9ui6y/mode=imports/optimized/lightgallery.js";
      import lgFullscreen from "https://cdn.skypack.dev/pin/lightgallery@v2.0.0-beta.4-flTmGp4UDZ7xjie9ui6y/mode=imports/unoptimized/plugins/fullscreen/lg-fullscreen.es5.js";
      import lgPager from "https://cdn.skypack.dev/pin/lightgallery@v2.0.0-beta.4-flTmGp4UDZ7xjie9ui6y/mode=imports/unoptimized/plugins/pager/lg-pager.es5.js";
      import lgThumbnail from "https://cdn.skypack.dev/pin/lightgallery@v2.0.0-beta.4-flTmGp4UDZ7xjie9ui6y/mode=imports/unoptimized/plugins/thumbnail/lg-thumbnail.es5.js";

      window.addEventListener("DOMContentLoaded", (event) => {
        lightGallery(document.getElementById("lightGallery"), {
          speed: 500,
          allowMediaOverlap: true,
          enableSwipe: true,
          plugins: [lgPager, lgFullscreen, lgThumbnail],
        });
      });
    </script>
  </body>
</html>

Solution

  • The problem was that plugins have CSS files too, and I was missing those files.

    https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/css/lg-thumbnail.css
https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/css/lg-pager.css