Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 ?

like image 756
Faraz Aleem Avatar asked Jan 08 '16 14:01

Faraz Aleem


4 Answers

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 ?

like image 166
Faraz Aleem Avatar answered Nov 17 '22 16:11

Faraz Aleem


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/

like image 34
Bas van Stein Avatar answered Nov 17 '22 15:11

Bas van Stein


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:

enter image description here

In Firefox it looks like this:

enter image description here

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

like image 1
Purplejacket Avatar answered Nov 17 '22 15:11

Purplejacket


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

like image 1
Tanmoy Biswas Avatar answered Nov 17 '22 16:11

Tanmoy Biswas