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 ?

Answer 1

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 ?

Answer 2

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/

Answer 3

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/*'

Answer 4

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