Lightgallery不起作用（分别使用翡翠和加载页面）

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?

Answer 1

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