search

sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.55k stars 1.29k forks source link

Thumbnails shows up as column on the left #1520

Closed Daviid-P closed 1 year ago

Daviid-P commented 1 year ago

Description

I have no idea what's going on, left and right keys work to change slides, and clicking on the "thumbnails" also change the slides.

enter image description here

Steps to reproduce

Save HTML code below to main.html and open in browser.

Sample HTML markup

<!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>
sachinchoolur commented 1 year ago

You need to add styles for the plugins as well.

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

Let me know if it solves the issue

Daviid-P commented 1 year ago

That was it, thank you.