/////////////////////////////
///////gallery/style.css/////
/////////////////////////////

body {
	background: #666;
}

#main {
	border: #444 solid 2px;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	position: relative;
	margin:0 auto;
	width: 864px;
	height: 98%;
	overflow: auto;
	background: #888;
}

#main img {
	position: relative;
	border: #444 solid 2px;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	margin: 16px;
	width: 128px;
	height: 128px;
	box-shadow: 10px 10px 5px #444;
	-moz-box-shadow: 10px 10px 5px #444;
	-webkit-box-shadow: 10px 10px 5px #444;
}

#main img:hover {
	width:160px;
	height: 160px;
	margin: 0px;
	animation: grow 1s;
	-moz-animation: grow 1s;
	-webkit-animation: grow 1s;
}

@keyframes grow {
	0% {width: 128px; height: 128px; margin: 16px;}
	100% {width: 160px; height: 160px; margin: 0px;}
}

@-moz-keyframes grow {
	0% {width: 128px; height: 128px; margin: 16px;}
	100% {width: 160px; height: 160px; margin: 0px;}
}

@-webkit-keyframes grow {
	0% {width: 128px; height: 128px; margin: 16px;}
	100% {width: 160px; height: 160px; margin: 0px;}
}

#imgframebg {
	text-align: center;
	display: none;
	background: #666;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
}

#imgframebg img {
	background: #fff;
	border: #fff solid 8px;
	box-shadow: 10px 10px 5px #000;
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	margin-top: auto;
}


/////////////////////////////////
////////////index.php////////////
/////////////////////////////////



<?php
include_once("imgtools.php");
?>

<html>
  <head>
    <link rel=stylesheet href="/gallery/style.css" type="text/css" media=screen />
  </head>
  <body>
    <div id="main">
    <?php
      if ($handle = opendir('images')) {
          while (false !== ($entry = readdir($handle))) {
          // loop throught files in 'images' dir
              if ($entry != "." && $entry != ".." && substr($entry, 0, 6) == "thumb_") {
            // if filename starts with 'thumb_', create new <img> to screen
            $width = getWidth("images/" . substr($entry, 6));
            $height = getHeight("images/" . substr($entry, 6));
                  echo "<img src='/gallery/images/$entry' alt='$entry' data-realwidth='$width' data-realheight='$height' />\n";
              }
          elseif($entry != "." && $entry != ".." && substr($entry, 0, 6) !== "thumb_") {
            // create new thumbnails
            createThumb($entry);
          }
          }
          closedir($handle);
      }
    ?>
    </div>
      <hr />
      THX to <a href="http://wechall.net">wechall</a>
    <div id="imgframebg"> click to close this screen</div>
  </body>
  <script type="text/javascript">
  <!--
    //get screen width and height
    var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
  //-->
  </script>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("img").click(function(){
    // show and clear #imgframebg
    $("#imgframebg").show("slow");
    $("#imgframebg").html("");
    var src = $(this).attr("src");
    src = '/gallery/images/' + src.substring(22);
    var width = $(this).attr("data-realwidth");
    var height = $(this).attr("data-realheight");
    if (width >= x - (x/10)) width = x - (x/10);
    if (height >= y - (y/10)) height = y - (y/10);
    //add new <img> to #imgframebg
    $("#imgframebg").append('<img src="' + src + '" alt="' + src + '" width="' + width +'" height="' + height + '" />');
  });

  $("#imgframebg").click(function(){
    // hide #imgframebg
    $(this).hide("slow");
  });
});
</script>