resizer.zip - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Just-In-Time Image Transformer With Cache </title>
    <style type="text/css">
        body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
        	margin:0px;
        	padding:0px;
        }
        
        body{
        	color:white;
        	font-size:13px;
        	background-color:#E6E6E6;
        	font-family:Arial, Helvetica, sans-serif;
        }
        
        h1{
        	color:white;
        	font-size:28px;
        	font-weight:bold;
        	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
        }
        
        h2{
        	font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
        	font-size:10px;
        	font-weight:normal;
        	letter-spacing:1px;
        	padding-left:2px;
        	text-transform:uppercase;
        	white-space:nowrap;
        }
        
        .round {
        	-moz-border-radius:8px;
        	-khtml-border-radius: 8px;
        	-webkit-border-radius: 8px;
        	border-radius:8px;            
        }

        #main{
        	width:830px;
        	margin:0 auto;
            margin-top:10px;
        }
        
        .container{
        	color:white;
        	width:100%;
        	overflow:hidden;
        	background-color:#000;
        	padding:10px;

        }
        .container:hover{
            background-color: #28313b;
        }
        
        .item {
            position: relative;
            float: left;
            width: 250px;
            height: 250px;
            margin: 0 5px 5px 0;
        }
        
        a, a:visited {
        	color:#00BBFF;
        	text-decoration:none;
        	outline:none;
        }
        
        a:hover{
        	text-decoration:underline;
        }
        
        .info{
            position: absolute;
            bottom: 17px;
            left: 17px;
            width: 226px;
            padding: 8px 5px;
            background-color: #fff;
            color:#333;

        }
        
        .tutorial-info{
        	text-align:center;
        	padding:10px;
            width: 800px;
        }
    </style>    
</head>

<body>

<div id="main">
    	<div class="container round item">
            <img src="upload/image.jpg" />
            <div class="info round">Original Image (/upload/google.jpg)</div>
        </div>
    	<div class="container round item">
            <img src="thumb/rotate,90,image.jpg" />
            <div class="info round">Rotate (/thumb/rotate,90,google.jpg)</div>
        </div>
    	<div class="container round item">
            <img src="thumb/gray,image.jpg" />
            <div class="info round">Gray (/thumb/gray,google.jpg)</div>
        </div>        
    	<div class="container round item">
            <img src="thumb/crop,50x50,image.jpg" />
            <div class="info round">Crop and Resize 50x50</div>
        </div>
    	<div class="container round item">
            <img src="thumb/crop,100x100,image.jpg" />
            <div class="info round">Crop and Resize 100x100</div>
        </div>
    	<div class="container round item">
            <img src="thumb/crop,200x200,image.jpg" />
            <div class="info round">Crop and Resize to any size</div>
        </div>
    
    <br />
    
  	<div class="container round tutorial-info">
    This demo from Awcore. View the <a href="http://awcore.com/dev/4/1/Just-In-Time-Image-Resizer-With-Cache_en" target="_blank">original tutorial</a></div>
</div>
</body>
</html>