<?php
if (!isset($_COOKIE["user"]))
{
	header("Location: index.html");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>6D Photo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/touchTouch.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/touchTouch.jquery.js"></script>
<script>if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");}	</script>
<script>
jQuery(window).load(function () {
    $x = $(window).width();
    if ($x > 1024) {
        jQuery("#content .row").preloader();
    }
    jQuery('.magnifier').touchTouch();
    jQuery('.spinner').animate({
        'opacity': 0
    }, 200, 'easeOutCubic', function () {
        jQuery(this).css('display', 'none')
    });
});
</script>
<!--[if lt IE 8]>
<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>  
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<link rel="stylesheet" href="css/docs.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<![endif]-->
</head>
<body>
<div class="spinner"></div>
<!-- header -->
<header>
  <div class="container clearfix">
    <div class="row">
      <div class="span12">
        <div class="navbar navbar_">
          <div class="container">
            <h1 class="brand brand_"><a href="homepage.php"><img alt="" src="img/logoict.png"> </a></h1>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse_">Menu <span class="icon-bar"></span> </a>
            <div class="nav-collapse nav-collapse_  collapse">
              <ul class="nav sf-menu">
                 <li><a href="homepage.php">Home</a></li>
                <li class="active"><a href="photoalbum.php">Gallery</a></li>
                <li><a href="event.php">Event</a></li>
                   <li class="sub-menu"><a href="classmates.php">classmates</a>
                    
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
|<a  href="logout.php">logout</a>|
<div class="bg-content">
  <!-- Content -->
  <div id="content">
    <div class="ic"></div>
    <div class="container">
      <div class="row">

          <h4>Photo album</h4>

        <div class="clear"></div>
        <ul class="portfolio clearfix">
		
		    <form method="post" enctype ="multipart/form-data">
			 <br/>
		     <h5> upload the picture : </h5>
		     <input type = "file" class="custom-file-input" name = "image"><br>
			 <br/><br/>
			 <button type = "submit" class="btn btn-1" name="submit"  value = "Upload" >upload </button>
			 
		
		    </form>

<div class="bg-content">
  <!-- Content -->
  <div id="content">
    <div class="ic"></div>
    <div class="container">
      <div class="row">
        <article class="span12">
          <h4>Our photos</h4>
		  <p>Select a type of photo from the list.</p>


<select id="mySelect1" onchange="myFunction()">
  <option value="classphoto">class photo
  <option value="events">events
  <option value="artwork">artwork
</select>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect1").value;
 
    document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
        </article>
        <div class="clear"></div>
        <ul class="portfolio clearfix">
        
          <li class="box"><a href="img/1/classphoto1.jpg" class="magnifier" ><img alt="" src="img/1/classphoto1.jpg" width="270px" height="192px" ></a></li>
		  <li class="box"><a href="img/1/classphoto2.jpg" class="magnifier" ><img alt="" src="img/1/classphoto2.jpg" width="270px" height="192px" ></a></li>
		  <li class="box"><a href="img/1/classphoto3.jpg" class="magnifier" ><img alt="" src="img/1/classphoto3.jpg" width="270px" height="192px" ></a></li>
		  <li class="box"><a href="img/2/event1.jpg" class="magnifier" ><img alt="" src="img/2/event1.jpg" width="270px" height="192px" ></a></li>
		  <div class="clear"></div>
		  <li class="box"><a href="img/3/butterfly.png" class="magnifier" ><img alt="" src="img/3/butterfly.png" width="270px" height="192px" ></a></li>
		  <li class="box"><a href="img/3/cat_like_dragon.png" class="magnifier" ><img alt="" src="img/3/cat_like_dragon.png" width="270px" height="192px" ></a></li>
		  <li class="box"><a href="img/3/four_colors.png" class="magnifier" ><img alt="" src="img/3/four_colors.png" width="270px" height="192px" ></a></li>
		   <li class="box"><a href="img/3/lightning_bolt.png" class="magnifier" ><img alt="" src="img/3/lightning_bolt.png" width="270px" height="192px" ></a></li>
      
       
      </div>
    </div>
  </div>
</div>
   

<<!-- footer --><div align="center" class="navigationBar">
    <u><a href="./photoalbum.php">1</a></u>
   |  <a href="./photoalbum1.php">2</a>
   | <a href="./photoalbum1.php">Next</a>
  | <a href="./photoalbum1.php">Last</a>
</div>

<script src="js/bootstrap.js"></script>

</body>
</html>