how to display images and genderate popup image when click using jqueryui,php,mysql

imagedisplay.php
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<?php
@mysql_connect("localhost","root","");
@mysql_select_db("database");
$query="select * from gallery";
$temp=@mysql_query($query);
?>
      <div id="imagedisplay" >
    <img src="#" id="dialogimage">
</div>

<div id="image">
    <?php while ($result=@mysql_fetch_assoc($temp))
    {
        //echo $result["imagepath"];
        ?>
    <a href="imagedisplay.php?id=<?php echo $result["id"];?>" id="atag">
    <img src="<?php echo $result["imagepath"];?>">
    </a>
    <?php }?>
</div>
      <script type="text/javascript">
      $(document).ready(function(e){
           $( "#imagedisplay" ).dialog({
               autoOpen: false,
               width:700,
               height:00,
               model:true,
               resizable:false
            });
            $(".ui-button").click(function(e){
               $("#image").show();
            });
          $("a").click(function(e){
              e.preventDefault();
             
              var id="imagedisplayscript.php?id="+this.href.slice(-1);
            
             $.ajax(
                     {
                         url:id,
                 processData: false,
                 cache: false,
                 type: 'POST',
                 success: function (data, textStatus, jqXHR) {
                   
                     $("#dialogimage").attr("src",data);
                       //$("#imagedisplay").css(" background-image", 'url("'+data+'")');
                       $("#dialogimage").css("height","500px");
                       $("#dialogimage").css("width","500px");
                         $( "#imagedisplay" ).dialog( "open" );
                         $("#image").hide();
                    }
                     });
                     });
      });
      </script>

stylesheet.css
#image
{
    width: 500px;
    height: 500;
    border-bottom-style: inset;
    border-bottom-width: 1px;
    border-bottom-color: black;
}
img
{
    height: 200px;
    width: 200px;
    border: black;
    border-bottom-style: double;
}
.ui-widget-header,ui-state-default,ui-button
{
            background:activeborder;
               // #b9cd6d;
            border: 1px solid black;
            color: #FFFFFF;
            font-weight: bold;
          
}
.ui-dialog ,ui-widget,ui-widget-content,ui-corner-all,ui-front ,ui-draggable,ui-resizable
{
    height: 800px;
    width: 800px;
}
.ui-dialog-content,ui-widget-content
{

    height: 520px;
    width: 495px;
}


imagedisplayscript.php
<?php
@mysql_connect("localhost","root","");
@mysql_select_db("database");
$query="select * from gallery where id=".$_REQUEST["id"];
$temp=@mysql_query($query);
$result=@mysql_fetch_assoc($temp);
echo $result["imagepath"];
?>