5

我在我的项目中成功配置了 lightgallery。但是，当我单击缩略图并出现大图像时，上一个，下一个，关闭图标未正确显示。事实上奇怪的字符正在显示。这可以在页面上查看：http: //agentpet.com/lightgallery/lg.html。请帮我看看有什么问题吗？

4

7 回答 7

3

非常感谢您的回答，是的，这是字体问题。我将字体文件夹放在正确的路径上，它解决了问题。我在 url 上集成了 lightgallery：http: //agentpet.com/ver1/index.php/user/get_pet_details/22

我需要更多帮助。在上面的网址上，有一张大图和其他小缩略图。当用户单击大图像时，Lightgallery 应该工作，当用户单击缩略图时，我想在大图像上显示单击的缩略图，而不是显示 lightgallery。我怎样才能实现这个功能？

于 2016-01-11T13:06:25.117 回答
1

请探索 lightGallery-master 您将从 Light Gallery 的网站下载 这是字体文件夹的路径

lightGallery-master/dist/fonts

放置“字体”

项目根目录下的文件夹

于 2019-07-12T13:47:24.780 回答
1

错误包含的JS脚本不是图标的问题（如@Blady214所述），图标不显示的原因是因为这些错误：

[错误] 加载资源失败：服务器响应状态为 404（未找到）（lg.svg，第 0 行）

不包括字体（图标嵌入在一个名为的字体文件中，该文件lg.svg应该存在于fonts目录中。）

从 Github 下载字体目录：https ://github.com/sachinchoolur/lightGallery/tree/master/src/fonts

并将字体目录放在：http ://agentpet.com/lightgallery/

于 2016-01-08T14:34:28.400 回答
1

我遇到了类似的问题。在 Chrome 开发人员工具中检查后，我发现这个 html 奇怪地呈现在图标应该在的位置：

<span class="lg-close lg-icon"></span>
<a id="lg-download" target="_blank" download="" class="lg-download lg-icon" href="./media/work/web/hovee/HOV_WEB_HERO.jpg"></a>
<span class="lg-fullscreen lg-icon"></span>

其实上面的代码不是我写的，只能在lightgallery.min.js中找到。

在 Chrome 中它看起来像这样：

在此处输入图像描述

在 Firefox 中，它看起来像这样：

在此处输入图像描述

为了解决这个问题，我将我的修改gulpfile.js为如下所示：

gulp.task('fonts', ['bower'], function() {
  gulp
  .src([
    './fonts/*',
    './bower_components/bootstrap/dist/fonts/*',
    './bower_components/font-awesome/fonts/*',
    './bower_components/lightgallery/dist/fonts/*'
    ])
  .pipe(gulp.dest('./public/fonts'));
});

最后我只需要添加这一行： './bower_components/lightgallery/dist/fonts/*'

于 2017-01-21T00:16:41.470 回答
0

我的上一个按钮也消失了。

我正在查看 'lightgallery.css' 并在这里更改为My Fork以解决此问题。

曾是 ...

.lg-actions .lg-prev:after {

变成：

.lg-actions .lg-prev:before {

...就像 lg.next 一样。

希望它可以帮助任何人。

于 2017-11-14T17:07:54.117 回答
0

您的 JS 脚本不起作用，并且图像作为链接正常打开。

http://agentpet.com/dist/js/lg-video.js Failed to load resource: the server responded with a status of 404 (Not Found) 
http://agentpet.com/dist/js/lg-autoplay.js Failed to load resource: the server responded with a status of 404 (Not Found)

检查您的文件的链接。

于 2016-01-08T14:26:47.780 回答
0

从以下位置更改 LightGallery CSS 文件中的字体路径

：

@font-face {
  font-family: 'lg';
  src: url("../fonts/lg.ttf?22t19m") format("truetype"), url("../fonts/lg.woff?22t19m") format("woff"), url("../fonts/lg.svg?22t19m#lg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

至 ：

@font-face {
  font-family: 'lg';
  src: url("YOUR_PATH/fonts/lg.ttf?22t19m") format("truetype"), url("YOUR_PATH/fonts/lg.woff?22t19m") format("woff"), url("YOUR_PATH/fonts/lg.svg?22t19m#lg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

注意：不要忘记在您的目录中放置 LightGallery 字体...

于 2020-09-03T07:53:54.193 回答