0

我对 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 应该出现在 index 页面中，该页面由 loadIndex() 函数加载（我使用的是带有多个页面的导航栏）。我没有正确地进行 lightgallery 通话吗？我的 $(document).ready(...) 是否与加载我的索引页面同时发生？（虽然我知道脚本在技术上是同步调用的）。

基本上我的图像根本没有任何效果，并且仍然是一个非样式列表..有人可以帮忙吗？

4

1 回答 1

0

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'
        });
    });
}
于 2016-10-08T16:16:28.947 回答