Lightgallery not working (using jade and loading page separately)

Question

I am relatively new to javascript and I cannot figure out what I might be doing wrong here to implement lightgallery in my code.

I included all stylesheets (in the header) and relevant scripts. Here is what part of my head and body looks like.

head
    link(rel='stylesheet',  href='nodescripts/css/lightgallery.css')
body
    //jade block for pages
    block content
    script(src='/nodescripts/jquery.min.js')
    script(src='/nodescripts/bootstrap.min.js')
    script(src='/nodescripts/wow.min.js')

    //gallery
    script(src='/nodescripts/js/lightgallery.js')
    script(src='nodescripts/js/lg-thumbnail.min.js')
    script(src='nodescripts/js/lg-fullscreen.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js')
    script(src="/javascripts/loadPages.js")

    script.    
        //loads main menu page (function from loadPages.js)
        loadIndex()

    script.
        $(document).ready(function() {
            $("#lightgallery").lightGallery({
                selector: '.item'
           }); 
        });

The loadIndex function in loadPages.js (goes to server side, works without a pb)

function loadIndex (){
    $.get('/Index', function(content){
        $("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
        $('#mainContainer').html(content);
    });
}

And here is the images markup I use:

#photoRow.row
    ul#lightgallery 
        li
            a.item(href='/images/s-gallery/big(1).jpg')
                img(src='/images/s-gallery/small/small(1).jpg')
        li
            a.item(href='/images/s-gallery/big(2).jpg')
                img(src='/images/s-gallery/small/small(2).jpg')
        li
            a.item(href='/images/s-gallery/big(3).jpg')
                img(src='/images/s-gallery/small/small(3).jpg')

The lightgallery is supposed to appear in the index page, which is loaded by the loadIndex() function (I am using a navbar with several pages). Am I not doing the lightgallery call properly? Is my $(document).ready(...) happening at the same time than my index page is being loaded? (Though I know that scripts are technically called synchronously).

Basically my images show no effect at all and remain a non styled list.. Can someone help?

If `loadIndex` does an AJAX query then you would want to initialise `lightGallery` in there, after the content has been received and rendered to the document. But just guessing as hard to tell what is wrong without seeing the actual `loadIndex` function. Could you add that function code to your post? — GillesC, Oct 08 '16 at 16:04

score 0 · Answer 1 · answered Oct 08 '16 at 16:16

0

Call lightGallery from the loadIndex function as below.

Because it is an AJAX function the callback is executed after the document ready function is fired so the plugin could not find any elements to work with.

function loadIndex (){
    $.get('/Index', function(content){
        $("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
        $('#mainContainer').html(content);
        $("#lightgallery").lightGallery({
            selector: '.item'
        });
    });
}

answered Oct 08 '16 at 16:16

GillesC

10,647
3
40
55

Nevermind ! Actions do work now ! Style doesn't though (still looks like an hotizontal list ). I can't figure out if the lightgallery style is supposed to be applied by the css stylesheet that comes with it or if I am suppose to add personal style – user2399897 Oct 08 '16 at 16:58
From the lightgallery github it seems like the elements are created by it and the CSS provided is used. In the demo directory there seems to still be a lot of extra CSS needed for it. Did you check network requests and so on to make sure the CSS if loaded properly? – GillesC Oct 08 '16 at 22:35

Lightgallery not working (using jade and loading page separately)

1 Answers1