问题标签 [lightgallery]

我有一个新闻提要页面，其中不同的帖子以灯光滑块和灯光画廊的组合显示他们的图像。到目前为止，我已经使它适用于硬编码的帖子，但未能对动态生成的帖子做同样的事情。

这是我用于组合 lightgallery 和 lightslider 的代码

这是我正在使用的代码，用于在动态生成的帖子中组合 lightslider 和 lightgallery

HTML：

JavaScript：

我正在使用 lightgallery 插件http://sachinchoolur.github.io/lightGallery/docs/api.html#attributes

我想在单击图像时获取 data-src 值。

基本的HTML如下

我的javascript如下

但我似乎无法获得点击图像的 data-src 属性值。

我添加了选择器：'this'，但我无法弄清楚我应该如何使用它？

任何帮助，将不胜感激。

我安装了一个 lightGallery，当我加载我的页面时效果很好。

但是当我执行 Ajax 调用来更新 lightGallery 图像时，lightSlider 不起作用。

我的问题是我可以在 Ajax 之后更新内容并全屏查看我的图像，但是每次执行此 Ajax 调用时都会重新初始化这些行。

在此处输入链接描述

换句话说，在 HTML 中我有以下问题：

在我的文件 main.js 中，我对其进行了初始化：

main.js

在我的 secondFile.js 中，我调用了 Ajax 调用，并在其成功中更新了图片库的图像

secondFile.js

此 lightSlider 的内容位于名称为“imageGallery”的 div 内

我正在学习 css flexbox，但我对 javascript 滑块有一个问题。我已经测试了几个（lightgallery.js、swiper.js、siema.js），但每次它似乎都破坏了我的 flexbox 容器。

我有一个主要元素和一个辅助元素。在移动设备上，我希望主要元素和辅助元素可以在另一个之下。它似乎运作良好。但在桌面上，我希望主要元素适合最大 1000 像素的 2/3，而旁边元素适合 1/3，并排。

不幸的是，滑块似乎打破了我的 .wrap 容器。我已经测试了很多东西并搜索了像我这样的问题但没有结果。我真的不明白什么可以解决我的问题。我必须承认我有点迷路了。

你可以在这支笔（lightgallery.js）上看到这个问题： https ://codepen.io/studiok7/pen/pxGWMJ

我是 Jekyll 和 Javascript 的新手，我正在尝试通过 Jekyll 的“sachinchoolur”（在 Github 上）实现 lightGallery。我查看了之前在此处和 Github 上提出的相关问题，并尝试了建议的解决方案，例如 a) 将 lightgallery 的来源从本地更改为 web 链接 b) 更改 lightgallery/jquery 的版本 c) 尝试不同的方法来实现它，比如： https ://github.com/sachinchoolur/lightGallery/blob/master/demo/index.html https://olivierpieters.be/blog/2016/02/26/creating-a-jekyll-image-gallery#adding- some-styling-with-scss https://www.npmjs.com/package/lightgallery/v/1.2.6 没有任何效果，错误仍然存​​在。

我从 Github 下载了 lightGallery，并没有通过 Bower 或 npm 安装它。我什至想知道是否有可能通过 Jekyll 实现它，因为它是一个 >static< 网站生成器，但实现同位素工作得很好。到目前为止，我没有在 Github 上推送它，因为我只是在测试它并且我在本地工作。这是我的代码：

如果有人可以帮助我找到解决方案，那就太好了！干杯，劳拉

今天在我的网站上安装了 lightGallery，这是代码的一部分：

具有 ID #portfolio_grid 的单个主容器有 2 个具有不同选择器的画廊 - 1 个用于横幅图像，2 个用于徽标。我想在点击时看到 2 个不同的画廊，每个画廊显示 1/1 图像而不是 1/2，所以我尝试理解 lightGallery HTML 标记说明并编写了以下代码：

这通常适用于第一个画廊，但不适用于第二个。我试图<figure>...</figure>用唯一的 id 包装 div，但在我的情况下它破坏了网站。

在此之后，我尝试了另一个与 lightGallery 自己的 destroy() 函数相关的解决方案，并编写了这段代码，该代码仅部分工作一次 - 我在第一个画廊中有 1/1 图像，在第二个画廊中有 1/1 图像。第二次点击图库图片会破坏网站。

如何使 lightgallery 与单个 id 和许多不同的选择器一起工作？请帮忙。

设置

我已经通过 NPM 加载了 Vanilla JS 库 lightgallery.js，并且importing正常。

问题

我正在通过 初始化这个库componentDidMount()，但它无法编译，因为'lightGallery' is not defined. 请参阅下面的示例

componentDidMount()我通过 Chrome 控制台删除和初始化库来验证库正在导入。当我这样做时，它按预期工作。

我不清楚为什么'lightGallery' is not defined在我不使用componentDidMount(). 我猜这要么是DOM加载时元素不存在的问题，要么是我import的设置方式问题。

任何帮助，将不胜感激。

当前页面

这是我设置的精简版本，其中画廊元素硬编码以便于解释。

当使用 Thymeleaf 渲染框架使用某个目录中可用的图像（因此图像的数量是可变的）请求页面时，我填充了一个图像容器：

这样做时，所有图像都显示在彼此下方的页面上（而我只想将第一张图像显示为占位符）。当我单击其中一个时，灯光画廊将打开，其中图像为缩略图。

我现在想隐藏除第一个之外的所有图像，这将是画廊的占位符。单击它将打开图库，其中占位符图像成为图库的第一个图像。有点像这样：

我正在尝试使用名为“lightgallery”的 jQuery 插件使用 Gatsby/React 构建一个图片库。我设法弄清楚如何让它在开发中工作。但是，当我尝试构建站点时，我遇到了问题。这是我的组件代码

一切都在开发中，但是，当我尝试“gatsby build”时，它会抛出以下错误：

我不知道出了什么问题以及如何解决这个问题，因为我是 gatsby/react 和 webpack 的新手。任何指针将不胜感激！

我有一个问题，我的图像对于每个click不同的图像都没有改变

问题：

1. 在改变不同的图像时它没有改变

2. 预览图像总是显示相同的图像

问题： 我想更改每个图像的图像预览

此处演示： https ://codepen.io/eabangalore/pen/OrWaRz