<!DOCTYPE html>
<html lang="en">
<head>
<title>Imperial College Caving Club</title>
<!--<meta charset="utf-8">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/rcc/caving/assets/iclogo.png" rel="icon"> <meta name="author" content="ICCC" />
<meta name="theme-color" content="#2D2D2D"><!-- Chrome, Firefox OS and Opera -->
<meta name="msapplication-navbutton-color" content="#2D2D2D"><!-- Windows Phone -->
<meta name="apple-mobile-web-app-status-bar-style" content="#2D2D2D"> <!-- iOS Safari -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/rcc/caving/theme/css/main.css" type="text/css" />
<link rel='stylesheet' media='screen and (max-width: 750px)' href='/rcc/caving/theme/css/mobile.css' />
<style>
.article-content {
min-height: 0 !important;
}
</style>
<script src="/rcc/caving/theme/js/jquery.js"></script>
<script src="/rcc/caving/theme/js/header.js" async=""></script>
<script src="/rcc/caving/theme/js/sidebar.js" async=""></script>
<!--Google Analytics Tracking-->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80065-2', 'auto');
ga('send', 'pageview');
</script>
<!--Control expansion of thumbnail box"-->
<script>
$(function() {
$('div.thumb-toggle').click(function(){
$('div.thumb_box').toggleClass('expand-thumb-box');
$('div.thumb-toggle').toggleClass('nodisplay');
var thumbox = ""
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf("thumbox=") != -1) thumbox = c.substring("thumbox=".length,c.length);
}
if (thumbox == "expand") {
document.cookie = "thumbox=" + "collapse" + ";";
}
else if (thumbox == "collapse") {
document.cookie = "thumbox=" + "expand" + ";";
}
else {
document.cookie = "thumbox=" + "collapse" + ";";
}
});
});
$( window ).load(function()
{
var thumbox = "";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf("thumbox=") != -1) thumbox = c.substring("thumbox=".length,c.length);
}
if (thumbox == "expand") {
$('div.thumb-toggle').each(function() {
if ($(this).hasClass("thcollapse")) {
$(this).removeClass("nodisplay");
} else if ($(this).hasClass("thexpand")) {
$(this).addClass("nodisplay");
}
});
$('div.thumb_box').addClass('expand-thumb-box');
}
else if (thumbox == "collapse") {
$('div.thumb-toggle').each(function() {
if ($(this).hasClass("thcollapse")) {
$(this).addClass("nodisplay");
} else if ($(this).hasClass("thexpand")) {
$(this).removeClass("nodisplay");
}
});
$('div.thumb_box').removeClass('expand-thumb-box');
}
else {
document.cookie = "thumbox=" + "collapse" + ";";
$('div.thumb-toggle').each(function() {
if ($(this).hasClass("thexpand")) {
$(this).addClass("nodisplay");
} else if ($(this).hasClass("thcollapse")) {
$(this).removeClass("nodisplay");
}
});
$('div.thumb_box').removeClass('expand-thumb-box');
}
});
</script>
<!--Remember scroll positions of page and selected item in the thumb box-->
<script>
function scroll(evt) {
var pagey = document.body.scrollTop;
document.cookie = "pagey=" + pagey + ";";
}
function mobscroll(evt) {
var pagey = document.body.scrollTop;
document.cookie = "pagey=" + pagey + ";";
}
$( window ).load(function()
{
document.addEventListener("touchend", mobscroll, false);
document.addEventListener("scroll", scroll, false);
var suby = $(".select-thumbnail").offset().top - $("#thumbnails-top").offset().top;
document.cookie = "suby=" + suby + ";";
var pagey_search = "pagey=";
var suby_search = "suby=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(pagey_search) != -1) pagey = c.substring(pagey_search.length,c.length);
if (c.indexOf(suby_search) != -1) suby = c.substring(suby_search.length,c.length);
}
document.body.scrollTop = pagey;
document.getElementById("thumb_box").scrollTop = suby;
});
</script>
</head>
<body>
<div class="banner">
<div class="menu-icon">☰</div>
<!--<div class="logo"><img src="/rcc/caving/assets/sidebariclogo.png"></div>-->
<div class="banner-title">
Photos </div>
<div class="banner-title-logo"><img alt="Imperial College Caving Club logo" src="/rcc/caving/assets/sidebariclogo.png"></div>
</div>
<div style="clear: both;"></div>
<div class="left-col">
<div class="sidebar">
<div class="logo">
<span style="height: 100%; vertical-align: middle; display: inline-block;"></span><!--Helper span to vertically center image-->
<a href="/rcc/caving/"><img alt="Imperial College Caving Club logo" src="/rcc/caving/assets/sidebariclogo.png"></a>
</div>
<div style="overflow-y: auto; overflow-x: hidden; height: 100%; display: flex; flex-flow: column nowrap;">
<hr class="hrsidebartop">
<div class="sidebar-content-box">
<div class="sidebar-item"><a href="/rcc/caving/">Home</a></div>
<div class="sidebar-item"><a href="/rcc/caving/pages/clubinfo.html">Club Info</a></div>
<div class="sidebar-item"><a href="/rcc/caving/pages/clubinfo.html#faq">FAQ</a></div>
<div class="sidebar-item"><a href="/rcc/caving/pages/contacts.html">Contacts</a></div>
</div>
<hr class="hrsidebar">
<div class="sidebar-content-box">
<div class="sidebar-item" data-idouter="trips-outer" data-idinner="trips-inner"><a href="#" onclick="return false;">Trips</a></div>
<div class="sidebar-outer collapsed" id="trips-outer">
<div class="sidebar-inner nodisplay" id="trips-inner">
<div class="sidebar-sub-item" data-idouter="trips-sub-outer-2015-2016" data-idinner="trips-sub-inner-2015-2016" data-upidouter="trips-outer" data-upidinner="trips-inner"><a href="#" onclick="return false;">How Do I Computer</a></div>
</div>
</div>
<div class="sidebar-item" data-idouter="tours-outer" data-idinner="tours-inner"><a href="#" onclick="return false;">Tours</a></div>
<div class="sidebar-outer collapsed" id="tours-outer">
<div class="sidebar-inner nodisplay" id="tours-inner">
<div class="sidebar-sub-item"><a href="#">Oh gosh</a></div>
</div>
</div>
<div class="sidebar-item" data-idouter="exped-outer" data-idinner="exped-inner"><a href="#" onclick="return false;">Expeditions</a></div>
<div class="sidebar-outer collapsed" id="exped-outer">
<div class="sidebar-inner nodisplay" id="exped-inner">
<div class="sidebar-sub-sub-item"><a href="#">Just look at the gifs</a></div>
</div>
</div>
<!--
<div class="sidebar-item"><a href="/rcc/caving/photo_archive/">Photos</a></div>
</div>
-->
<div class="sidebar-item"><a href="/caving/photo_archive/dirindex.html">Photos</a></div>
</div>
<hr class="hrsidebar">
<div class="sidebar-content-box">
<div class="sidebar-item"><a href="/rcc/caving/caves/">Caves</a></div>
<div class="sidebar-item"><a href="/rcc/caving/cavers/">Cavers</a></div>
<div class="sidebar-item"><a href="/rcc/caving/pages/library.html">Library</a></div>
</div>
<div id="sidebar-fill" class="sidebar-content-box">
</div>
<div class="sidebar-content-box">
<div class="sidebar-item"><a href="http://www.google.com/recaptcha/mailhide/d?k=01pKgPf4L76j23E4ymTAu8fw==&c=CoX_UvK7tWMqLjrzhcaEXTCP8fRKKSw-Cl1eAzdIcj4=">Email Us</a></div>
</div>
<div class="sidebar-content-box">
<div class="sidebar-item"><a href="/rcc/caving/old/index.php">Legacy Site</a></div>
</div>
</div>
<script>
$(window).load(function() {
var sbsection_search = "sbsection=";
var sbsubsection_search = "sbsubsection=";
var sbsection;
var sbsubsection;
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(sbsection_search) != -1) sbsection = c.substring(sbsection_search.length,c.length);
if (c.indexOf(sbsubsection_search) != -1) sbsubsection = c.substring(sbsubsection_search.length,c.length);
}
if (sbsection != null) {
var outerelement = $('#' + sbsection + '-outer');
outerelement.css({
'max-height': ''
});
outerelement.removeClass("collapsed");
var innerelement = $('#' + sbsection + '-inner');
innerelement.removeClass("nodisplay");
}
if (sbsubsection != null) {
var outerelement = $('#' + sbsection + '-sub-outer-' + sbsubsection);
outerelement.css({
'max-height': ''
});
outerelement.removeClass("collapsed");
var innerelement = $('#' + sbsection + '-sub-inner-' + sbsubsection);
innerelement.removeClass("nodisplay");
}
//document.cookie = 'sbsection=' + ';Path=/rcc/caving/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
//document.cookie = 'sbsubsection=' + ';Path=/rcc/caving/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
});
$(function() {
$('div.sidebar-item, div.sidebar-sub-item').click(function() {
//Check if in sub-menu. If so then set max-height of outer menu to default so it expands nicely with the sub menu transition.
if ($(this).data("upidouter") != null && $(this).data("upidinner")) {
var outer = $(this).data("upidouter");
var inner = $(this).data("upidinner");
var outerelement = $('#' + outer);
var innerelement = $('#' + inner);
if (!outerelement.hasClass('collapsed')) {
//var newheight = parseInt(outerelement.css('max-height'), 10) + height;
outerelement.css({
'max-height': ''
});
}
}
var outer = $(this).data("idouter");
var inner = $(this).data("idinner");
var outerelement = $('#' + outer);
var innerelement = $('#' + inner);
// To prevent the menu from lagging on mobile devices, the inners are set to
// display: none so this removes the nodisplay class for opening before the
// the item opens so the css transition works
var displayToggled = false;
if (outerelement.hasClass('collapsed')) {
innerelement.removeClass('nodisplay');
displayToggled = true;
}
//Ensure that outer element knows the inner height
//Needed to undo the sub-menus attribute removal from above
var height = innerelement.outerHeight();
outerelement.css({
'max-height': (parseInt(height)).toString() + 'px'
});
//If collapsing, set max-height to 0. Delay to allow transition to work because we only just set the max-height
if (!outerelement.hasClass('collapsed')) {
setTimeout(function() {
outerelement.css({
'max-height': '0px'
});
}, 50);
}
outerelement.toggleClass('collapsed');
// For collapsing items the inner elements are set back to nodisplay. Happens
// after collapse so css transition works
if (displayToggled == false) {
setTimeout(function() {
innerelement.addClass('nodisplay');
}, 500);
}
//Collapse all sub menus when a menu is collapsed
//Delay ensures outer transition looks nice
if (outerelement.hasClass('collapsed')) {
setTimeout(function() {
outerelement.find(".sidebar-outer").addClass('collapsed').css({
'max-height': '0px'
});
//alert("yo");
outerelement.find(".sidebar-inner").each(function() {
if (!$(this).hasClass("nodisplay")) {
$(this).addClass('nodisplay');
};
});
}, 400);
}
/*Script to remember sidebar submenu state and reopen things when you move
to a trip report*/
/*check if in a submenu*/
if ($(this).data("upidouter") != null && $(this).data("upidinner")) {
/*if yes get the id of the drawer wrappers, find them, also extract the section
and sub section from them*/
var upouter = $(this).data("upidouter");
var sbsection = upouter.replace("-outer", "");
var outer = $(this).data("idouter");
var sbsubsection = outer.replace(sbsection + "-sub-outer-", "");
var upouterelement = $('#' + upouter);
var outerelement = $('#' + outer);
/*If you're openeing a section/subsecton record it with a cookie
if closing, delete that cookie*/
if (!upouterelement.hasClass('collapsed')) {
document.cookie = 'sbsection=' + sbsection + ';Path=/rcc/caving/;';
}
else {
document.cookie = 'sbsection=' + sbsection + ';Path=/rcc/caving/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
if (!outerelement.hasClass('collapsed')) {
document.cookie = 'sbsubsection=' + sbsubsection + ';Path=/rcc/caving/;';
}
else {
document.cookie = 'sbsubsection=' + sbsubsection + ';Path=/rcc/caving/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
}
else {
/*Same as above but if there's no subsection*/
var outer = $(this).data("idouter");
var sbsection = outer.replace("-outer", "");
var outerelement = $('#' + outer);
if (!outerelement.hasClass('collapsed')) {
document.cookie = 'sbsection=' + sbsection + ';Path=/rcc/caving/;';
}
else {
document.cookie = 'sbsection=' + sbsection + ';Path=/rcc/caving/;expires=Thu, 01 Jan 1970 00:00:01 GMT;';;
}
}
//The scrollbar appearing can cause some elements to flow onto another line. This increses the size of the inner
//and can oveflow out of the outer. This ensures that at the end of a menu openeing, overflowing elements
//are adjusted.
var outer = $(this).data("idouter");
var outerelement = $('#' + outer);
outerelement.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$(".sidebar-outer").each(function() {
if ($(this).prop('scrollHeight') > $(this).height() && !($(this).hasClass("collapsed"))) {
height = $(this).children(".sidebar-inner").outerHeight()
$(this).css({'max-height':height});
}
});
});
});
});
</script>
</div> </div>
<div style="clear: both;"></div>
<div class="sidebar-closer mobile"></div>
<div class="center-col">
<div class="container">
<?php
$files = array();
foreach (scandir('.') as $file)
{
$file_parts = pathinfo($file);
if (strcasecmp($file_parts['extension'], 'gif') == 0 || strcasecmp($file_parts['extension'], 'jpg') == 0 ||strcasecmp($file_parts['extension'], 'png') == 0)
{
if (strpos($file, '--thumb') == false and strpos($file, '--orig') == false)
{
$files[] = $file;
}
}
}
$search = $_GET["image"];
$imagekey = array_search($search, $files);
echo '<div class="link-container">' . "\n";
if ( $files[$imagekey-1] != null)
{
echo '<div class="prevlink"><a id="prevlink" href=".?image=' . $files[$imagekey-1] . '">Previous</a></div>' . "\n";
}
else
{
echo '<div class="prevlink" ><a id="prevlink">Previous</a></div><br>' . "\n";
}
if ( $files[$imagekey] != null)
{
$file_parts = pathinfo($files[$imagekey]);
echo '<div class="currlink"><a id="currlink" href="' . $file_parts['filename'] . '--orig.' . $file_parts['extension'] . '">Original</a></div>' . "\n";
}
else
{
echo '<div class="currlink" ><a id="prevlink">Original</a></div><br>' . "\n";
}
if ( $files[$imagekey+1] != null)
{
echo '<div class="nextlink"><a id="nextlink" href=".?image=' . $files[$imagekey+1] . '">Next</a></div>' . "\n";
}
else
{
echo '<div class="nextlink" ><p id="nextlink">Next</a></div><br>' . "\n";
}
echo '<div style="clear: both;"></div>' . "\n";
echo '</div>' . "\n";
?>
<div class="article-content">
<?php
echo '<div class="image-wrapper"><div class="image-cell">';
if ($files[$imagekey] != null)
{
if ( $files[$imagekey+1] != null)
{
echo '<a id="mainlink" href=".?image=' . $files[$imagekey+1] . '">';
}
else
{
echo '<a id="mainlink" href=".?image=' . $files[0] . '">';
}
echo '<img class="maindisplay" id="maindisplay" alt="Click thumbnails below to see image. Click image to go to next image" src="' . $files[$imagekey] . '"></a></div></div>' . "\n";
}
else
{
echo '<a id="mainlink">';
echo '<img class="maindisplay" id="maindisplay" alt="Click thumbnails below to see image. Click image to get original"></a></div></div>' . "\n";
}
echo '<div class="thumb-toggle nodisplay thcollapse">Collapse</div>' . "\n";
echo '<div class="thumb-toggle thexpand">Expand</div>' . "\n";
echo '<div id ="thumb_box" class="thumb_box">' . "\n";
echo '<div id="thumbnails-top"></div>' . "\n";
foreach ($files as $key=>$file) {
$file_parts = pathinfo($file);
echo '<a class="thumbnail" id=' . $file . ' href=".?image=' . $file . '">' . "\n";
if ($imagekey == $key)
{
echo '<img id=image-' . $file . ' class="select-thumbnail" src="' . $file_parts['filename'] . '--thumb.jpg' . '"></a>' . "\n";
}
else
{
echo '<img id=image-' . $file . ' class="thumbnail" src="' . $file_parts['filename'] . '--thumb.jpg' . '"></a>' . "\n";
}
}
echo '</div>' . "\n";
?>
</div>
</div>
</div>
<div class="right-col">
</div>
</body>
</html>