0

I wanted to ask why my Lightbox isn't working. In my .html.erb file, I have:

<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>

And in my .css.scss file I have:

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

#lightbox {
    position: fixed;
}

Finally, for my 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!
            });
    }

});

I am using the Chrome web inspector to debug errors in the Javascript, and now I'm not throwing any at all, so I don't see what's wrong here? Especially since the jQuery alert I put in DOES actually pop up, and the hide functionality works... I'm stumped as to what the corrective path for my lightbox would be. :\ Any help is greatly appreciated, thank you!

enter image description here

4

1 回答 1

1

看起来你的 jquery 有点弱

例如，你在哪里写这个：

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

正确的方法可能是

$('#overlay')

尝试像上面那样重做，看看会发生什么

于 2012-10-21T21:01:30.633 回答