Close, prev, next icons not showing properly in Lightgallery Jquery

Question

I successfully configured lightgallery in my project. However, when i click on thumbnail and big image comes up , prev, next, close icons not showing properly. Infact strange characters are showing. This can be viewed on page : http://agentpet.com/lightgallery/lg.html . Please help me out whats wrong in it ?

score 3 · Answer 1 · answered Jan 11 '16 at 13:06

Thanks a lot for the answers and yes it was font issue. I placed the fonts folder at right path and it solved the problem. I integrated lightgallery on the url: http://agentpet.com/ver1/index.php/user/get_pet_details/22

One more help i need regarding this. On above url, there is one big image and rest small thumbnails. Lightgallery should work when user will click on large image, bt when user will click on thumbnails, instead of showing lightgallery , i want to show clicked thumbnail on large image. How can i achieve this functionality ?

score 2 · Answer 2 · answered Sep 03 '20 at 07:53

Change Font Path in LightGallery CSS File

From :

@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;
}

to :

@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;
}

NOTE : Don't Forget to place LightGallery Fonts in your Directory...

score 1 · Answer 3 · answered Jan 08 '16 at 14:34

The wrongly included JS scripts is not the problem of the icons (as mentioned by @Blady214), the reason why the icons are not showing is because of these errors:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (lg.svg, line 0)

The fonts are not included (the icons are embeded in a font file called lg.svg which should be present in the fonts directory.)

Download the fonts directory from Github: https://github.com/sachinchoolur/lightGallery/tree/master/src/fonts

And put the fonts directory in: http://agentpet.com/lightgallery/

Yes, It's working for me. lightgallery.css file was in CSS folder so I added src: url("../../fonts/lg.eot?n1z373"); and font added in the fonts folder. and working great. upvote from my side. — user9437856, Aug 04 '18 at 13:44

score 1 · Answer 4 · answered Jan 21 '17 at 00:16

I was having a similar problem. Upon inspection in Chrome Developer Tools I found this html that was rendering oddly where the icons should have been:

<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>

In fact, the above code wasn't written by me, it's only found in lightgallery.min.js.

In Chrome it looks like this:

In Firefox it looks like this:

To fix the problem I modified my gulpfile.js to look like this:

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'));
});

In the end I only had to add this line: './bower_components/lightgallery/dist/fonts/*'

score 1 · Answer 5 · answered Jul 12 '19 at 13:47

1

Please explore lightGallery-master which you will download from Light gallery's website This is the path of fonts folder

lightGallery-master/dist/fonts

Place 'fonts'

folder on the project root directory

answered Jul 12 '19 at 13:47

Tanmoy Biswas

171
1
1
17

score 0 · Answer 6 · answered Jan 08 '16 at 14:26

Your JS scripts doesn't work and image is open normally as link.

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)

Check links to your files.

score 0 · Answer 7 · answered Nov 14 '17 at 17:07

0

My prev button disapeared too.

I was looking at 'lightgallery.css' and changed like here My Fork to solve this issue.

Was ...

.lg-actions .lg-prev:after {

changed to:

.lg-actions .lg-prev:before {

... like lg.next is.

Hope it helps anybody.

answered Nov 14 '17 at 17:07

Andre Mesquita

879
12
25

score 0 · Answer 8 · edited Aug 20 '23 at 12:54

0

I fixed this issue by playing with the options. Apparently, there are separate settings in mobile. The controls (prev/next) are false by default in mobile.

mobileSettings: {
  controls: true,
  showCloseIcon: true,
  download: false
}

edited Aug 20 '23 at 12:54

Tyler2P

2,324
26
22
31

answered Aug 17 '23 at 18:46

Temp

1

Close, prev, next icons not showing properly in Lightgallery Jquery

8 Answers8