cwsvJudo/photoalben/photoalben.2016/2016-10-23_OttoGoshiLiga+HallCategoryIII2016/indexDev.jquery-lazyload.php

<?php
	header("Content-Type: text/html; charset=utf-8");
	header("Cache-Control: max-age=3600");

	$wkName = "19. Räucherkerzenpokal";

function getExifDate( $filename ){
	if(!file_exists( $filename )){
		throw new Exception(__FUNCTION__ . " :: {$filename} does not exist!");
	}
	$data = exif_read_data( $filename, 0, true);
	if( $data === false){
		return filemtime( $filename );
	}
	if(isset( $data['IFD0']['DateTime'])){
		return strtotime( $data['IFD0']['DateTime']);
	}
	else{
		return filemtime( $filename );
	}
}?>
<?php
	$data_directory = "./";
	$imgList = glob( $data_directory . "*.jpg");
	array_multisort(
		array_map( 'getExifDate', $imgList ),
		SORT_NUMERIC,
		SORT_ASC,
		$imgList
	);

	//~ $imgList = array(  );
	$imgSize = count( $imgList );
	assert( $imgSize > 0, "Bilder leider nicht verfügbar!");
	$currIndex = intval( $_GET["index"] );
	if( $currIndex < 0 ) $currIndex = 0;
	if( $currIndex >= $imgSize) $currIndex = $imgSize-1;
?>
<!DOCTYPE HTML>
<html lang="de">
	<head>
		<title>CWSV-Photoalbum: <?php echo $wkName?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="description" content="Bilder vom Wettkampf <?php echo $wkName;?>">
		<meta name="keywords" content="Judo, Bilder, Photos, Album, Galerie, Wettkampf, CWSV, Chemnitz, <?php echo $wkName;?>">
		<!-- BluimpGallery Zeug -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery.css">
		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-indicator.css">
		<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery-video.css">
		<link rel="icon" href="/ressourcen/graphiken/icons/cwsv.ico">
		<script type="text/javascript" src="/ressourcen/jsLib/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="/ressourcen/jsLib/jquery.lazyload.min.js"></script>
	</head>
	<body style="color: #000000; background-color: #FFAE00"  >
		<?php
			include( $_SERVER['DOCUMENT_ROOT'].'/ressourcen/phpLib/is_mobile.php');
			if(is_mobile()) echo "<a href=\"/pages/mobile/verein.wettkampfgalerien.php\">Zur Gallerieübersicht</a>";
			else            echo "<a href=\"/pages/desktop/verein.galerien.php\">Zur Gallerieübersicht</a>";
		?>


		<h1 style="text-align: center">
			Photoalbum [<b><?php echo $wkName?></b>]
		</h1>
		<p style="text-align: center; font-size:small">
			[<i>Insgesamt </i> <b>181 Bilder</b>]
		</p>
		<p style="text-align: center; font-size:small">
			Auf die jeweiligen Bilder klicken um eine größere Ansicht zu bekommen.
		</p>
		<hr/>
		<!-- The container for the list of example images -->
		<div id="links" class="links" style="text-align: center">
			<?php
				$imgSize = count( $imgList );
				for( $imgIndex = 0; $imgIndex < $imgSize; ++$imgIndex){
					echo
						"\t\t\t\t<span>".
							"<a href=\"view.php#".( $imgIndex )."\" >".
							"<img class=\"lazy\"".
								"id=\"Image".( $imgIndex + 1)."\" ".
								"data-original=\"./thumbs/".str_replace(".jpg", ".png", $imgList[$imgIndex])."\" ".
								//"src=\"./thumbs/".str_replace(".jpg", ".png", $imgList[$imgIndex])."\" ".
								"alt=\"thumbs/".str_replace(".jpg", ".png", $imgList[$imgIndex])."\" ".
							"/>".
							"</a>".
						"</span>\n";
				}
			?>
		</div>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$("img.lazy").lazyload();
			});
		</script>
<!-- BluimpGalerry Lightbox Version -->
		<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
		<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
			<div class="slides"></div>
			<h2 class="title"></h2>
			<a class="prev">‹</a>
			<a class="next">›</a>
			<a class="close">×</a>
			<a class="play-pause"></a>
			<ol class="indicator"></ol>
		</div>
<!--		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-helper.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery-fullscreen.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery-indicator.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery-video.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery-vimeo.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery-youtube.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/jquery.blueimp-gallery.js"></script>
-->
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery.min.js"></script>
		<script type="text/javascript" src="/ressourcen/blueimpGallery/js/jquery.blueimp-gallery.min.js"></script>
		<script>
			var imgList = [
				<?php
					$imgSize = count( $imgList );
					for( $imgIndex = 0; $imgIndex < $imgSize; ++$imgIndex){
						echo "\"".( $imgList[ $imgIndex ] )."\", ";
					}
				?>];
			var gallery = blueimp.Gallery(
				imgList,
				{
					<?php echo "index: ".$currIndex.",";?>
					onslide: function (index, slide) {
						var counterUrl = "/expCounter/counter.php";
						var pageUrl = encodeURIComponent( window.location.href ) + "?index=" + index.toString();
						var pageTitle = document.title + " [" + index.toString() + "]";
						var callUrl = counterUrl + "?jscode_version=1.2&chCounter_mode=js&status=active&visible=0&page_title=" + pageTitle + "&page_url=" + pageUrl;

						var xmlHttp = new XMLHttpRequest();
//						xmlHttp.onreadystatechange = function() {
//							if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
//								console.log(xmlHttp.responseText);
//						}
						xmlHttp.open("GET", callUrl, true); // true for asynchronous
						xmlHttp.send(null);
					},
					startSlideshow: true,
					stretchImages: true,
//					fullScreen: true,
				}
			);
		</script>
		<hr/>
<!--Beginn der Einbindung des Counters-->
<?php
$chCounter_template = <<<TEMPLATE
<table>
 <tr>
  <td>Besucher online: {V_VISITORS_CURRENTLY_ONLINE}</td>
  <td>Besucher bisher: {V_PAGE_VIEWS_THIS_PAGE}</td>
 </tr>
</table>
TEMPLATE;
$chCounter_page_title = "Photoalbum ".$wkName;
$chCounter_visible=1; include( $_SERVER['DOCUMENT_ROOT'].'/expCounter/counter.php');?>
<!--Ende der Einbindung des Counters-->
	</body>
</html>