<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>:: TDP Youth ::</title>

		<link href="css/bootstrap.css" rel="stylesheet" />
		<link href="css/template.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" />

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	
	<body>
		<div class="navbar navbar-default navbar-fixed-top main-menu sub-menu" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">TDP Youth</a>
				</div>
				<div class="navbar-collapse collapse menu">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="index.html">Home</a></li>
						<li><a href="about-tdp.html">About TDP</a></li>
						<li><a class="active" href="gallery.php">Gallery</a></li>
						<li><a href="links.html">Links</a></li>
						<li><a href="contact-us.html">Contact Us</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="gallery">
			<div class="container">
            	<div id="heading">
                	<h1>Gallery</h1>
                </div>
                
                <div id="gallery">
                
                <?php
                
                $directory = 'img/gallery';
                
                $allowed_types=array('jpg','jpeg','gif','png');
                $file_parts=array();
                $ext='';
                $title='';
                $i=0;
                
                $dir_handle = @opendir($directory) or die("There is an error with your image directory!");
                
                while ($file = readdir($dir_handle)) 
                {
                    if($file=='.' || $file == '..') continue;
                    
                    $file_parts = explode('.',$file);
                    $ext = strtolower(array_pop($file_parts));
                
                    $title = implode('.',$file_parts);
                    $title = htmlspecialchars($title);
                    
                    $nomargin='';
                    
                    if(in_array($ext,$allowed_types))
                    {
                        if(($i+1)%4==0) $nomargin='nomargin';
                    
                        echo '
                        <div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">
                        <a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>
                        </div>';
                        
                        $i++;
                    }
                }
                
                closedir($dir_handle);
                
                ?>
                <div class="clear"></div>
                </div>
			</div>
		</div>
		
		<footer>
			<div class="container">
				<p class="pull-left">&copy; 2014 TDP</p>
				<p class="pull-right">Designed by <a href="http://www.f9tech.com" target="_blank">f9tech</a></p>
			</div>
		</footer>
		
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.js"></script>
        
		<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>
        <script type="text/javascript">
			$(document).ready(function(){
				
				$('.pic a').lightBox({
					
					imageLoading: 'lightbox/images/loading.gif',
					imageBtnClose: 'lightbox/images/close.gif',
					imageBtnPrev: 'lightbox/images/prev.gif',
					imageBtnNext: 'lightbox/images/next.gif'
			
				});
				
			});
        </script>
	</body>
</html>