Закрыть, prev, следующие иконки, которые не отображаются должным образом в Lightgallery JQuery

Question

Я успешно настроил lightgallery в моем проекте. Однако, когда я нажимаю на миниатюру и появляется большое изображение, предыдущее, следующее, закрывает значки, которые не отображаются должным образом. Отображаются странные символы. Его можно посмотреть на странице: http://agentpet.com/lightgallery/lg.html. Пожалуйста, помогите мне, что в этом плохого?

Answer 1

Ваши 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 2

The ошибочно включены скрипты JS не проблема значков (как указано на @ Blady214), причина, почему иконки не отображаются из-за этих ошибок:

[Error] Не удалось загрузить ресурс: сервер ответил со статусом 404 (Not Found) (lg.svg, линия 0)

шрифты не включены (иконки поместить его в файл шрифта называется lg.svg, который должен присутствовать в каталог fonts.)

Загрузить каталог шрифтов из Github: https://github.com/sachinchoolur/lightGallery/tree/master/src/fonts

и поместить каталог шрифтов в: http://agentpet.com/lightgallery/

Answer 3

спасибо за ответы и да, это был шрифт вопрос. Я поместил папку шрифтов по правильному пути и решил проблему. Я включил фотогалерею по URL: http://agentpet.com/ver1/index.php/user/get_pet_details/22

Еще одна помощь, которая мне нужна в этом отношении. На приведенном выше URL-адресе есть одно большое изображение и небольшие мелкие миниатюры. Lightgallery должен работать, когда пользователь нажимает на большое изображение, когда пользователь нажимает на миниатюры, вместо того, чтобы показывать lightgallery, я хочу показать миниатюру с кликом на большом изображении. Как я могу достичь этой функциональности?

Answer 4

У меня была аналогичная проблема. После проверки в 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 5

Моя кнопка пред disapeared тоже.

Я искал «lightgallery.css» и изменился как здесь My Fork, чтобы решить эту проблему.

Был ...

.lg-actions .lg-prev:after { 

изменено на:

.lg-actions .lg-prev:before { 

... как lg.next есть.

Надеюсь, что это поможет кому угодно.