Question

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

loadPages.js中的loadIndex函数（进入服务器端，无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（）函数加载（我使用的是带有多个页面的导航栏）。我没有正确地进行灯光呼叫吗？我的$（文件）.ready（...）是否在加载我的索引页面的同时发生？（虽然我知道脚本在技术上是同步调用的。）

基本上我的图片根本没有效果，仍然是一个非风格的列表.. 有人可以帮忙吗？

Answer 1

从lightGallery功能拨打loadIndex，如下所示。

因为它是一个AJAX函数，所以在文档就绪函数被触发后执行回调，因此插件找不到任何可以使用的元素。

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

Lightgallery无法正常工作（分别使用玉石和装载页面）

1 个答案: