jQuery: Lightbox

[drjay1627]

Hello,

I created 2 lightboxes on my page. When I just had one, everything worked fine.

The 2 lightboxes are not displayed at the same time. There are 2 links that open each respectly.

<a href="#" class="lightbox1">Open box 1</a>

<a href="#" class="lightbox2">Open box 2</a>

The following is the HTML/CSS:

<div class="backdrop"></div>

<div id="wapper" class="centered">
<div class="box1">
<div class="close">x</div>
<div class="clear"></div> 
<form name="form1" id="form1">
...       
</form>
</div>

<div class="box2">
<div class="close">x</div> 
<div class="clear"></div> <!-- end of div clear -->
<div id="responce">

</div> <!-- end of div response -->

</div> <!-- end of box2 -->


</div><!--end of wapper -->



<style>
.backdrop
        {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }


        .box1, .box2
        {
            position:absolute;
            top:20%;
            left:30%;
            width:500px;
            height:300px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;
        }

        .close
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }

</style>

I need help with jquery/javascript.

What I want to do is something like:

<script type="text/javascript">

            $(document).ready(function(<lightbox>, <box>){

                $('<lightbox1>').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(<box>);
                });

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

            });

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

        </script>

I know this is not possible. I tried using if-else but I can't seem to get the syntax right with document.ready.

Can someone please HELP!!!

Apprecite any help as always!

drjay