
  <script type="text/javascript">
  
  $(function(){
    
    var win = $(window);
    var detail = $("#detail");
    var thumb = $(".thumb");
    var overlay = $("#overlay");
    
    overlay.css("opacity", 0.5);
    overlay.hide();
     
    detail.hide();
    
    thumb.click(function(){
      var path = $(this).attr("src");
      
      path = "images/" + path.split("thumb_")[1];
      
      detail.fadeIn();
      overlay.fadeIn();
     
      $("#detail > img").attr("src", path);
      $("#detail > div").text($(this).attr("desc"));
    });
    
    overlay.click(function(){
      detail.fadeOut();
      overlay.fadeOut();
    });

  function center(){
    
    detail.css("left", win.width() / 2 - detail.width() / 2); 
    detail.css("top", win.height() / 2 - detail.height() / 2); 
    
    overlay.css("width", win.width()); 
    overlay.css("height", win.height()); 
  }
  
  center();
  
  win.resize(center);
    
  });
  </script>
  
  <style type="text/css">
  #thumbs{
     width: 600px;
     margin-left : auto;
     margin-right : auto;
    
  }
  .thumb{
    float : left;
    padding : 10px;
    cursor : pointer;
  }
  .thumb > img{
      border: 1px solid gray;
   }
  #detail{
    position: absolute;
    padding-left: 10px;
    z-index : 100;
    width : 700px;
    height : 376px;
  }
  #container{
    width: 925px;
  }
  #overlay{
    position: absolute;
    background-color : black;
    top: 0px;
    left : 0px;
    z-index : 50;
    cursor : pointer;
  }
  #desc{
    color : white;
  }
  </style>
  
  <h1>Gallery</h1>
  
      <div id="overlay"></div>
    <div id="thumbs">
    <?php
    
    require_once("includes/quickmysql.php");
    
    connect();
    
    $query = "SELECT * FROM projects ORDER by id DESC";
    $result = mysql_query($query) or die(mysql_error());
    $rows = mysql_num_rows($result);
    if ($rows > 0){
        while($data = mysql_fetch_assoc($result)){
        removeSlashes($data);
        $image = $data["image"];
        $title = $data["title"];
        $desc = $data["desc"];
        
    echo "<div class='thumb' src='images/thumb_$image' desc='$desc'> 
          <img src='images/thumb_$image' /><br />
          $title
          </div>";
    }
      }else {
        echo "no projects";
      }
    
    disconnect();
    
    ?>
    </div>
    
    <div id="detail">
    <img src="big_images/float_head.jpg" />
    <div id="desc">
    </div>
    </div>