<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>gems</title>
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    
    <script>
      // when the page is loaded and ready;
      $(function(){
        
        var win = $(window);
        win.css("opacity", 0.5);
        var detailImage = $("#detail img");
        var cover = $("#cover");
        var detail = $("#detail");
    
        
        $("#thumbs img").css("opacity", 1).
          mousedown(function(){
            //"big_" + 
            var path = $(this).attr("src").replace("_thumb", "");
            detailImage.attr("src", path);
            $("#detail").fadeIn();
            
            cover.css({width : win.width(), height : win.height()}).
            fadeTo(800, 1);
            $(document).one("click", function(){
              cover.fadeOut();
              detail.fadeOut();
              
                  
              //$(".close").click(function(){
              //$(this).animate({width : "0px", opacity : "0", } 500, function() { $(this).remove(); });
              
            });
          });
          hover(function(){
            $(this).animateIn({opacity : 0.2}).css("color", "black");
         
          });
        
      });
         
    </script>
    <style>
      html,body{
        background-color : #CCC;
        color : white;
        font-family : Helvetica, Arial, sans-serif;
        
        margin:0;
        padding:0;
      }
      .hed{
        font-weight : thin;
        font-size : 14px;
        margin : 20px 20px 20px;
        text-transform : uppercase;
      }
      
      .close{
        /*position : absolute;*/
        position : relative;
        left : 80px;
        top : 10px;
        font-family : Arial Black, sans-serif;
        cursor : pointer;

      }
      #cover{
        position : absolute;
        left : 0px;
        top : 0px;
        background-color : black;
        display : none;
      }
      
      #detail{
        display : none; 
        position : relative;
        width : 100%;
        z-index : 100;
        text-align : center;
        cursor : pointer;
        
      }
      #center{
        width : 800px;
        height : 800px;
        margin-left: auto;
        margin-right : auto; 
        
      }
      #thumbs img{
        float : left;
        margin:10px;
        
        border-color : 5px, black;
        cursor: pointer;
      }
    </style>
  </head>
  
   <body>
    <div id="center">
      <div class="hed">
        <p class="uppercase">gems</p>
      
      <div id="thumbs">
        <?php
          
           // $files = glob("images/*");
         $files = glob("big_images/*");
          
          foreach ($files as $filename) {
            echo "<img src='" . $filename ."' />";
          }
          ?>
      </div>
    </div>
    
    <div id="cover"></div>
    
      
    <div id="detail">
     
      <img src="big_images/josef.jpg" />
    </div>
    
  </body>
</html>