Question

How can we make universal light box i mean same code for all light box function in the page
here is 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');
        });

}

DEMO

Answer 1

Your script doesn’t know which lightbox to pull up because you never specify one. One way that you can set the lightbox is to designate the lightbox id in one of the <a> attributes. Then, on click, pull the value of that attribute and reference with $("#valuePulledFromAttribute") rather than the generic $('.backdrop, .box') you are using now.

I was able to create a fork using no 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');
    });
}​
});