lightGallery全屏弹窗显示异常：缩略图栏位置错误求助

你的lightGallery出现缩略图栏在左侧纵向排列的问题，核心原因是未引入缩略图插件对应的CSS文件，加上使用了beta测试版本，双重因素导致布局异常。

问题根源 #

1. 仅导入了lightGallery核心CSS，未加载lg-thumbnail插件的样式文件，缩略图缺少横向布局的规则约束，只能按浏览器默认的块元素规则纵向堆叠。
2. 使用的2.0.0-beta.4是测试版本，本身存在兼容性风险，可能引发未知布局问题。

修复方案 #

1. 补充缩略图插件CSS #

在页面<head>标签内添加以下代码，引入缩略图插件的样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-thumbnail.css">

2. 建议切换至稳定版本（可选） #

beta版本存在不确定性，换成最新稳定版可避免潜在问题，示例如下：

• 替换CSS链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lg-thumbnail.min.css">

• 替换脚本导入路径：

import lightGallery from "https://cdn.skypack.dev/lightgallery@2.7.1";
import lgFullscreen from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/fullscreen";
import lgPager from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/pager";
import lgThumbnail from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/thumbnail";

修复后完整代码示例 #

<!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.7.1/css/lightgallery.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lg-thumbnail.min.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>
      <!-- 其余图片链接保持不变 -->
    </div>
    <script type="module">
      import lightGallery from "https://cdn.skypack.dev/lightgallery@2.7.1";
      import lgFullscreen from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/fullscreen";
      import lgPager from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/pager";
      import lgThumbnail from "https://cdn.skypack.dev/lightgallery@2.7.1/plugins/thumbnail";

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

内容的提问来源于stack exchange，提问作者Daviid