0

ユニバーサルライトボックスを作成するにはどうすればよいですか。つまり、このページのすべてのライトボックス関数の同じコードは JQuery です。

    $(document).ready(function() {

        $('.lightbox').click(function() {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function() {
            close_box();
        });

        $('.backdrop').click(function() {
            close_box();
        });

    });

    function close_box() {
        $('.backdrop, .box').animate({
            'opacity': '0'
        }, 300, 'linear', function() {
            $('.backdrop, .box').css('display', 'none');
        });

}

デモ

4

2 に答える 2

1

ライトボックスを指定しないため、スクリプトはプルアップするライトボックスを認識しません。ライトボックスを設定する 1 つの方法は、属性idの 1 つでライトボックスを指定することです。次に、クリックすると、現在使用しているジェネリックではなく、<a>その属性と参照の値を取得します。$("#valuePulledFromAttribute")$('.backdrop, .box')

HTML5 を使用せずにフォークを作成できました: http://jsfiddle.net/J6ee5/2/

$(document).ready(function() {

$('.lightbox').click(function() {
    var thisBox = $(this).attr("name");
    console.log(thisBox);
    $('.backdrop,.' + thisBox).animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop,.' + thisBox).css('display', 'block');
});

$('.close').click(function() {
    close_box();
});

$('.backdrop').click(function() {
    close_box();
});

function close_box() {
    $('.backdrop,.box').animate({
        'opacity': '0'
    }, 300, 'linear', function() {
        $('.backdrop,.box').css('display', 'none');
    });
}​
});
于 2012-04-04T16:35:54.690 に答える
0

1 つのオプションは、データ属性をセレクターとして使用することですhttp://jsfiddle.net/Q676T/1/

$(document).ready(function() {

    $('.lightbox').click( function() {
        var dataTag = $(this).data('tag');
        $('.backdrop')
            .animate({'opacity': '.50'}, 300, 'linear')
            .css('display', 'block');

        $('.box[data-tag='+dataTag+']')
            .animate({'opacity': '1'}, 300, 'linear')
            .css('display', 'block');    
    });

    $('.close, .backdrop').click( function() {
        $('.backdrop, .box')
            .animate({'opacity': '0'}, 300, 'linear', 
                     function(){ $(this).css('display', 'none');})

    });
});

​
于 2012-04-04T16:34:20.023 に答える