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 は、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 に答える