rknightuk/index.php

## index.php
<!DOCTYPE HTML>
<html>

	<head>

		<title>rbbl.ws share</title>

		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

		<style type="text/css">
			body {
				background-color: #eceef1;
				font-family: 'Lato', sans-serif;
			}

			#wrapper {
				margin: 0 auto;
				width: 100%;
				background-color: white;
			}

			section {
				margin: 0 auto;
				width: 60%;
				padding: 50px;
			}

			.item {
				list-style-type: none;
				padding: 20px;
			}

			.item:hover {
				cursor: pointer;
				background-color: #eceef1;
			}

			img {
				display: none;
				padding-top: 10px;
				max-width: 70%;
				max-height: 400px;
				height: auto;
			}
		</style>

	</head>

	<body>

		<div id="wrapper">
			<section>
				<?php

				$images = glob("*.{jpg,png,gif}", GLOB_BRACE);
				array_multisort(array_map('filemtime', $images), SORT_NUMERIC, SORT_DESC, $images);

				foreach($images as $image)
				{
					echo '<div class="item">

					'.$image.'
					<div class="img"><a href="
					'.$image.'
					"><img src="
					'.$image.'
					"></a>
					</div>
					</div>';
				}

				?>
			</section>
		</div>

	</body>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
		$('.item').click(function(e) {
			$(e.currentTarget).find('img').slideToggle();
		});
	</script>

</html>
	<!DOCTYPE HTML>
	<html>

	<head>

	<title>rbbl.ws share</title>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

	<style type="text/css">
	body {
	background-color: #eceef1;
	font-family: 'Lato', sans-serif;
	}

	#wrapper {
	margin: 0 auto;
	width: 100%;
	background-color: white;
	}

	section {
	margin: 0 auto;
	width: 60%;
	padding: 50px;
	}

	.item {
	list-style-type: none;
	padding: 20px;
	}

	.item:hover {
	cursor: pointer;
	background-color: #eceef1;
	}

	img {
	display: none;
	padding-top: 10px;
	max-width: 70%;
	max-height: 400px;
	height: auto;
	}
	</style>

	</head>

	<body>

	<div id="wrapper">
	<section>
	<?php

	$images = glob("*.{jpg,png,gif}", GLOB_BRACE);
	array_multisort(array_map('filemtime', $images), SORT_NUMERIC, SORT_DESC, $images);

	foreach($images as $image)
	{
	echo '<div class="item">

	'.$image.'
	<div class="img"><a href="
	'.$image.'
	"><img src="
	'.$image.'
	"></a>
	</div>
	</div>';
	}

	?>
	</section>
	</div>

	</body>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	$('.item').click(function(e) {
	$(e.currentTarget).find('img').slideToggle();
	});
	</script>

	</html>