0

ライトボックスが機能しない理由を知りたいです。私の .html.erb ファイルには、次のものがあります。

<a href="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" class="thumbnail lightbox">
<img src="http://cdn.geekwire.com/wp-content/uploads/2011/10/patel-neil1-300x200.jpg?7794fe" alt="">
</a>

そして、私の .css.scss ファイルには次のものがあります。

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: black url(loader.gif) no-repeat scroll center center;
}

#lightbox {
    position: fixed;
}

最後に、私の jQuery の場合:

$(document).ready(function(){

    $('#toggleButton').click(function() {
        if ($('#experiment').is(':visible')) {
            $('#experiment').hide();
        } else {
            $('#experiment').show();
        }
    });

    alert('working!');

    $('a.lightbox').click(function(e) {
        // hide scrollbars!
        $('body').css('overflow-y', 'hidden');

        $('<div id="overlay"></div>')
            .css('top', $(document).scrollTop())
            .css('opacity', '0')
            .animate({'opacity': '0.5'}, 'slow')
            .appendTo('body');

        $('<div id="lightbox"></div>')
            .hide()
            .appendTo('body');

        $('<img>')
            .attr('src', $(this).attr('href'))
            .load(function() {
                positionLightboxImage();
            })
            .click(function() {
                removeLightbox();
            })
            .appendto('#lightbox');

        return false;
    });

    function positionLightboxImage() {
        var top = ($(window).height() - $('#lightbox').height()) / 2;
        var left = ($(window).width() - $('#lightbox').width()) / 2;
    $('#lightbox')
        .css({
            'top': top + $(document).scrollTop(),
            'left': left
        })
        .fadeIn();  
    }

    function removeLightbox() {
        $('#overlay, #lightbox')
            .fadeOut('slow', function() {
                $(this).remove();
                $('body').css('overflow-y', 'auto'); // show scrollbars!
            });
    }

});

Chrome Web インスペクターを使用して Javascript のエラーをデバッグしていますが、今は何もスローしていないので、ここで何が問題なのかわかりませんか? 特に、DOES に入れた jQuery アラートが実際にポップアップし、非表示機能が機能するため、ライトボックスの修正パスがどうなるかについて困惑しています。:\ どんな助けでも大歓迎です、ありがとう!

ここに画像の説明を入力

4

1 に答える 1

1

あなたのjqueryに少し弱いようです

たとえば、これを書く場所：

$('<div id="overlay"></div>')

それを行う適切な方法はおそらく

$('#overlay')

上記のようにやり直して、何が起こるか見てみましょう

于 2012-10-21T21:01:30.633 に答える