问题标签 [lightgallery-2]

我对 LightGallery 插件 ( lightGallery - Git )有一点问题。我使用 jQueryMobile。

我的画廊位于特定页面上。当我到达这个页面时，它会请求一个远程服务器来获取一些图片。

然后我初始化 LightGallery。第一次没问题。

但是当我离开画廊页面并回来之后（有一个新的服务器请求），lightGallery 没有运行。

浏览器中没有错误，我显示了我的照片，但我无法像第一次那样单击它来运行 LightGallery。

我的代码：

HTML：

Javascript：

这个库有一个基于元素 ID 构建画廊的示例：

我想基于一个类构建几个实例。我试图迭代一个集合：

但它不起作用。我收到此错误（尽管 HTML 元素内部有一个a元素img）：lightGallery :- data-src is not provided on slide item 1. Please make sure the selector property is properly configured.

如何从 HTML 集合构建这些画廊？

我是网络开发的新手。我正在尝试使用同位素和infiniteScroll.js 插件和lightGallery.js 来创建一个画廊。lightGallery.js 不适用于我的代码。

JS

我已阅读lightGallery 文档。据说在那里初始化.lightGallery()新附加的内容。但即使我尝试附加它也不起作用。谁能告诉我如何使用 JavaScript 添加新添加的内容？任何建议都会有所帮助。

我正在使用灯光图库 JS 的内联图库，并尝试在图库的图像上添加点击事件侦听器。为此，我正在使用这个事件 - lgAfterOpen。

我无法获取所有图像标签，因为图像是延迟加载的，使用此lgAfterOpen事件，直到那时我只在 DOM 中加载第一张图像。我应该如何保持延迟加载并能够将事件侦听器放在画廊的所有图像上？

我正在尝试的代码示例：

我正在尝试使用 lightgallery.js 创建图像和 HTML5 视频的混合滑块。

图像显示在滑块中，而视频不播放。它给出了这个错误：

糟糕..无法加载内容

下面是我的项目中包含的 CSS 和 JS 文件。

任何人都请建议我是否缺少任何 JS 或 CSS 文件，或者创建幻灯片的方式不正确。

JS部分：

HTML部分：

我尝试将 lightGallery 与 Angular 11+ 应用程序一起使用。当静态创建 HTML 内容时，照片库按预期工作，即data-srclightGallery 中的标签属性具有静态值：

但是，一旦动态设置，就会显示以下错误消息data-src：

无法绑定到“src”，因为它不是“a”的已知属性。

不工作的部分：

示例在stackblitz上。

我在这里做错了什么？

我使用 lightGallery 创建了一个图片库。我用它来显示 YouTube 视频和图像。
对于 YouTube 视频缩略图，我使用:afterCSS 为<a>代码中的标签添加了播放按钮的图像。
我遇到了一个问题，当页面加载 YouTube 视频缩略图和图像缩略图时加载速度很慢，播放按钮在缩略图之前加载。
它导致设计问题并且看起来不太好。
缩略图完全加载后如何显示播放按钮图像？

HTML：

jQuery：

CSS：

截屏

我是 Webpack 的新手，我正在尝试加载lightgallery通过yarn add.

我可以成功加载 JavaScript。但是，样式表在尝试加载字体时崩溃：

Error: Cannot find module '../fonts/lg.woff2?io9a6k'

它按如下方式加载：

app/views/layouts/application.html.erb：

app/assets/javascript/packs/application.scss：

引导加载正常。

在lightgallery/scss/lightgallery.scss：

在lightgallery/scss/_lg-fonts.scss：

该文件夹lightgallery/fonts包含文件，不确定参数?io9a6k的用途

如何正确加载样式表？