New to JQuery Light box type effect (almost working Help pls!)

New to JQuery Light box type effect (almost working Help pls!)

Hi all,

I am very new to Jquery and this is all a bit of a learning curve for me. This is one of the reasons i am trying to make my own type of light box type of effect to use within a photo gallery i will be building.

I have two main problems.

1. On first load of my page my animation does not appear to work as expected. It looks to me to be only doing the show() function and not the animate part. But once you click it again (after it not worked as expected) it will then work as expected doing the right animatio.

2. This problem is in internet exploer (im using version 8 to test) When the div opens up to animate it seems to be unsure of what size it need to grow to, it grows too big then shirnks itself back to the right size. This makes the animation look wired and wrong.

Im not too sure if ive explained those two issues well but it will prob be more clear once you have looked at the code & page.

The page can be found here http://hair-21.co.uk/gallery2.php

And my code is as below. Any help would be great and i would be very thankful to see where im going wrong.

  1.    
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
            //ie fix
            $("#dim").css("filter","alpha(opacity=80)");
            
          
            $("#imageLink").click(function(){
                    $("#dim").fadeIn(function(){
                            $("#gall").show("slow",function(){
                                    $("#gall").animate({height:200},"slow");
                                    $("#gall").animate({width:150},"slow",function(){
                                            $("#close").show();   
                                    });
                            });
                    });
                  
            });
     
      $("#close").click(function(){
                    $("#close").hide();   
                    $("#gall").animate({height:100},"normal");
                    $("#gall").animate({width:100},"normal",function(){
                            $("#gall").hide(function(){
                                    $("#dim").fadeOut()
                            });
                    });
      })
     
     
     
    });
    </script>   
       
       
    <style type="text/css" media="all">
    <!--
    @import url("css/style.css");
    -->
     
    #dim{
            left: 0px;
        top: 0px;
            position: absolute;
            width:100%;
            height:100%;
            filter:alpha(opacity=80);
            -moz-opacity:.60;
            opacity:.80;
            background-color: #000;
            z-index: 0;
            display: none;
    }
    #gall{
           background-color: #FFFFFF;
            border-color: #000000;
            border-style: solid;
            top: 160px;
            left: 40%;
            position: absolute;
            z-index: 1;
            display: none;
            height: 200px;
            width: 150px;
    }
    #close{
            position: absolute;
            top: 2px;
            right: 2px;
            display: none;
     
    }


    </style>

    <link  rel="apple-touch-icon" href="images/apple.png"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>

    <body>
    <?php
    include("includes/incTopMenu.php");

    ?>
    <h1>Gallery</h1>

    <div id="dim">
    </div>
    <div id="gall">
    <img src="gallery/P1070513.jpg" alt="hannah"  />
    <a href="#" id="close">Close</a>

    </div>


    <table width="600" border="1" >
    <tr>
        <td><a href="#" id="imageLink"><img src="gallery/P1070513.jpg" alt="hannah" width="75" height="100" /></a></td>
        <td><img src="gallery/P1070513.jpg" alt="hannah" width="75" height="100" /></td>
        <td><img src="gallery/P1070513.jpg" alt="hannah" width="75" height="100" /></td>
            <td><img src="gallery/P1070513.jpg" alt="hannah" width="75" height="100" /></td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>


    </table>