英文:
lightgallery not showing correctly in fullscreen popup
问题
我创建了一个类似这样的图库。
然后初始化 lightGallery，它会显示如下。
有任何想法为什么？
编辑：
添加了代码片段，你可以看到缩略图栏在左侧以列的形式显示，而不是在这个工作示例中的底部 https://codepen.io/AquaMay/pen/PoPzNjB
看起来你的帖子主要是代码；请添加更多细节。
看起来你的帖子主要是代码；请添加更多细节。
看起来你的帖子主要是代码；请添加更多细节。
<!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>
<!-- 更多图片 -->
</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>
<details>
<summary>英文:</summary>
I create a gallery like this.
[![enter image description here][1]][1]
Then initialize the lightGallery and this is how it shows up.
[![enter image description here][2]][2]
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
[1]: https://i.stack.imgur.com/nyNnE.png
[2]: http://i.imgur.com/zXY20O9h.gif
</details>
# 答案1
**得分**: 0
问题在于插件也有CSS文件，而我漏掉了这些文件。
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
<details>
<summary>英文:</summary>
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
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论