关闭，上一页，下一个图标在Lightgallery Jquery

Question

我在项目中成功配置了lightgallery。但是，当我点击缩略图和大图像出现时，上一个，接下来，关闭图标无法正常显示。事实上奇怪的人物正在出现。这可以在页面上查看：http://agentpet.com/lightgallery/lg.html。请帮我解决它的错误吗？

Answer 1

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

我还需要一个帮助。在上面的网址上，有一个大图像和其他小缩略图。当用户点击大图时，Lightgallery应该工作，当用户点击缩略图时，而不是显示光照库，我想在大图像上显示点击的缩略图。我该如何实现这一功能？

Answer 2

错误包含的JS脚本不是图标的问题（正如@ Blady214所提到的），图标未显示的原因是由于这些错误：

  

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

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

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

将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

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

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

我正在寻找＆＃39; lightgallery.css＆＃39;并在此处更改My Fork以解决此问题。

是......

.lg-actions .lg-prev:after {

更改为：

.lg-actions .lg-prev:before {

...像lg.next一样。

希望它可以帮助任何人。

Answer 6

请浏览lightGallery-master，您可以从Light Gallery的网站下载 这是字体文件夹的路径

lightGallery-master/dist/fonts

放置“字体”

项目根目录上的文件夹

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