Question

我想问为什么我的Lightbox不工作。在我的.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网络检查器来调试Javascript中的错误，现在我根本没有扔掉任何东西，所以我不明白这里有什么问题？特别是因为我在DOES中放入的jQuery警报实际上弹出，并且隐藏功能正常工作......我很难理解我的灯箱的纠正路径是什么。：\非常感谢任何帮助，谢谢！

enter image description here

Answer 1

看起来你的jquery有点弱......

例如，你写这个：

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

正确的方法可能是

$('#overlay')

尝试重做以上，看看会发生什么

简单的jQuery灯箱不适用于Rails应用程序。请帮忙？

1 个答案: