jQuery lightbox

Question

I created a lightbox and it works fine. Now I want to create 2 lightboxes and I can't seems to get my jquery correct.

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

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

There is a form in the first box and some content in the second.

HTML/CSS:

<div class="backdrop"></div> <--end of backdrop -->

<div id="wapper" class="centered">

<div class="box1">
<div class="close">x</div> <!--Close 'x' on the lightbox-->
<div class="clear"></div>  <!--CSS clear to correct flow -->
<form name="form1" id="form1">
...       
</form>
</div> <!--end of box1-->

<div class="box2">
<div class="close">x</div> <!--Close 'x' on the lightbox--> 
<div class="clear"></div> <!-- end of div clear -->
<div id="responce">
</div> <!-- end of div response [This is where the content goes after its fetched from mysql]-->
</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>

js/jquery:

<script type="text/javascript">
            $(document).ready(function(){

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

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

                  $('.backdrop').click(function(){
                    close_box($('.box1'));
                });
          }
          else if($('lightbox2').click(function()){
        $('.backdrop, box2').animate({'opacity':'.50'}, 300, 'linear');
                    $('box2').animate({'opacity':'1.00'}, 300, 'linear');
                    $('.backdrop, box2').css('display', 'block');

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

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

I have been working on this code for 2 days now, trying to figure out whats wrong, can someone please help. The if condition is whats giving the issue. Also the close button is not working - how do I pass the parameter?

Thanks!

#

So, I was able to get the light box to work, jQuery/Javascript:

$(document).ready(function(){
            $('.lightbox1').click(
            function() {
                $('.backdrop, .box1').animate({'opacity':'.50'}, 300, 'linear');
                $('.box1').animate({'opacity':'1.00'}, 300, 'linear');
                $('.backdrop, .box1').css('display', 'block');

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

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

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

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

        });

The close_box() function is still not working. The parameter is not being passed in properly.

Answer 1

I'm confused about your selector. You wouldn't use $('<lightbox1>').click but rather $('.lightbox1').click to select an element(s) which match(es) a class.

Same goes for $('.backdrop, <box>') in your close_box() function - I assume you want to use box as a variable, so you'd do $('.backdrop, ' + box).animate(