关闭、上一个、下一个图标在 Lightgallery Jquery 中未正确显示

Question

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

我遇到了类似的问题。在 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/*'

Answer 4

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

lightGallery-master/dist/fonts

放置“字体”

项目根目录下的文件夹

Answer 5

您的 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)

检查文件的链接。

Answer 6

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

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

曾经...

.lg-actions .lg-prev:after {

改为：

.lg-actions .lg-prev:before {

...就像 lg.next 一样。

希望对大家有所帮助。

Answer 7

在 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 字体...

Answer 8

试试这些 CDN：

 <link rel='stylesheet' href='https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css'>