Блог

Я относительно новичок в javascript, и я не могу понять, что я могу сделать неправильно здесь, чтобы реализовать lightgallery в своем коде.

Я включил все таблицы стилей (в заголовок) и соответствующие скрипты. Вот как выглядит часть моей головы и тела.

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

Функция loadIndex в loadPages.js (переходит на сторону сервера, работает без pb)

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

И вот разметка изображений, которую я использую:

 #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')
  

Предполагается, что lightgallery отображается на индексной странице, которая загружается функцией loadIndex() (я использую панель навигации с несколькими страницами).
Я неправильно выполняю вызов lightgallery? Это мой $ (документ).готовность (…) происходит одновременно с загрузкой моей индексной страницы? (Хотя я знаю, что скрипты технически вызываются синхронно).

В основном мои изображения не показывают никакого эффекта вообще и остаются списком без стиля.. Может кто-нибудь помочь?

Вызовите lightGallery loadIndex функцию, как показано ниже.

Поскольку это функция AJAX, обратный вызов выполняется после запуска функции document ready, поэтому плагин не смог найти какие-либо элементы для работы.

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