<html>
  <head>
  <title>Gallery</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <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 = path.split(/\/|_thumb.jpg/);
      
      path = "big_images/" + path[1] + ".jpg";
      
      detail.fadeIn();
      overlay.fadeIn();
     
      $("#detail > img").attr("src", path);
    });
    
    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;
  }
  #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;
  }
  </style>
  </head>
  
  <body>
  
  <h1>Gallery</h1>
  
      <div id="overlay"></div>
	  <div id="thumbs">
	  <?php
	  
	  // get all files with php extension in this directory
	  $files = glob("images/*.jpg");
	  
	  foreach ($files as $filename) {
	    echo "<div class='thumb' src='$filename' >";
		echo "<img src='" . $filename ."' />";
		echo "</div>";
	  }
	  
	  ?>
	  </div>
	  
	  <div id="detail">
		<img src="big_images/float_head.jpg" />
	  </div>
  
  </body>
</html>