neue Datei: homepage/redesign2018/markdownExperiment/src/galleryHelper/videoGallery.tmpl.php
This commit is contained in:
marko
@@ -0,0 +1,278 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$basePath = "/users/cwsvjudo/www";
|
||||||
|
include_once("config.inc.php");
|
||||||
|
|
||||||
|
require_once($basePath."/config/phpcount.config.php");
|
||||||
|
require_once($basePath."/config/cwsvJudo.config.php");
|
||||||
|
|
||||||
|
require_once($basePath."/ressourcen/phpLib/phpcount/phpcount.php");
|
||||||
|
|
||||||
|
require_once($basePath."/ressourcen/phpLib/cwsvJudo/miscAssis.php");
|
||||||
|
|
||||||
|
$cwsvJudoDbConnection = getCwsvJudoDbConn();
|
||||||
|
$cwsvJudoDbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||||
|
|
||||||
|
$wkId = $_GET['wkId'];
|
||||||
|
|
||||||
|
$vidQuery =
|
||||||
|
$cwsvJudoDbConnection->prepare(
|
||||||
|
"SELECT url FROM cwsvjudo.`shiai.videos` WHERE wkId = :wkId;"
|
||||||
|
);
|
||||||
|
$vidQuery->bindParam(':wkId', intval($wkId), PDO::PARAM_INT);
|
||||||
|
|
||||||
|
$vidQuery->execute();
|
||||||
|
$wkVideos = $vidQuery->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
|
||||||
|
$vidList = array();
|
||||||
|
foreach( $wkVideos as $wkVid){
|
||||||
|
// $posterSrc = str_replace( ".webm", ".jpg", str_replace("webm/", "thumbnails/", $vid ) );
|
||||||
|
// $posterSize = getimagesize( $posterSrc );
|
||||||
|
$vidList[] = array(
|
||||||
|
'vidSrc' => $wkVid['url'],
|
||||||
|
// 'posterSrc' => $posterSrc,
|
||||||
|
// 'width' => $posterSize[0],
|
||||||
|
// 'height' => $posterSize[1]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Hilfsfunktion zum Anpassen der htmlDescription
|
||||||
|
function descrName($aName){
|
||||||
|
$retVal = "Videos der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
|
||||||
|
if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV beim ".$aName;
|
||||||
|
if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Videos der Judoka des Chemnitzer WSV bei der ".$aName;
|
||||||
|
return $retVal;
|
||||||
|
}/// Ende descrName
|
||||||
|
|
||||||
|
$messages = array();
|
||||||
|
?>
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<title><?php echo $wkName?> - Videoalbum</title>
|
||||||
|
<?php //PHPCount::AddHit($wkName." - Videoalbum");?>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="description" content="<?php echo descrName($wkName);?>">
|
||||||
|
<meta name="keywords" content="Album, Videos">
|
||||||
|
<!-- 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">
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- favIcon und Co nach der empfehlung von https://github.com/audreyr/favicon-cheat-sheet -->
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64" href="/ressourcen/graphiken/logos/favicon/favicon.ico">
|
||||||
|
<link rel="apple-touch-icon" sizes="152x152" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-152.png" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/ressourcen/graphiken/logos/apple-touch-icon/apple-touch-icon-180.png" />
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
|
||||||
|
<link rel="canonical" href="http://cwsvjudo.bplaced.net<?php echo $_SERVER['REQUEST_URI']?>" />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<script type="text/javascript" src="/ressourcen/blueimpGallery/js/blueimp-gallery.min.js" async=""></script>
|
||||||
|
-->
|
||||||
|
<!--https://github.com/aFarkas/lazysizes-->
|
||||||
|
<!--
|
||||||
|
<script src="/ressourcen/jsLib/lazysizes.min.js" async=""></script>
|
||||||
|
-->
|
||||||
|
<style>
|
||||||
|
img.lazyload {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{box-sizing: border-box; margin: 0;}
|
||||||
|
.smallFont{font-size: small;}
|
||||||
|
.centerText{text-align: center;}
|
||||||
|
.navButton{
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-color: white;
|
||||||
|
border-style: outset;
|
||||||
|
border-radius: 1em;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: .5em;
|
||||||
|
padding-right: .5em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="color: #000000; background-color: #FFAE00" >
|
||||||
|
<a title="Galerien der Judoka des Chemnitzer WSV" href="/galerien">Zur Galerieübersicht</a>
|
||||||
|
<?php
|
||||||
|
/// Eine kleine Messagebox
|
||||||
|
if( !empty($messages) ){
|
||||||
|
?>
|
||||||
|
<div style="border: 1px solid black">
|
||||||
|
<?php
|
||||||
|
if( !empty( $messages['info'] ) ) echo( $messages['info'] );
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h1 class="centerText" >
|
||||||
|
<?php echo($wkName);?> - Videoalbum
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="centerText smallFont">
|
||||||
|
[<?php echo count($vidList)?> Videos]
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="centerText smallFont">
|
||||||
|
Auf die jeweiligen Bilder klicken um das Video anzuwählen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.galImgList{
|
||||||
|
font-size: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.galImgList div{
|
||||||
|
flex: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1vw 0;
|
||||||
|
flex-grow: unset;
|
||||||
|
}
|
||||||
|
.galImgList div img{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.galImgList div video{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.galImgList div{
|
||||||
|
width: calc(100% * (1/3) - 2 * .5vw);
|
||||||
|
margin: .5vw;
|
||||||
|
}
|
||||||
|
.galImgList{
|
||||||
|
padding: .5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
.galImgList div{
|
||||||
|
width: calc(100% * (1/4) - 2 * 1vw);
|
||||||
|
margin: 1vw;
|
||||||
|
}
|
||||||
|
.galImgList{
|
||||||
|
padding: 1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<?php
|
||||||
|
foreach( $vidList as $vidKey => $vidEntry ){
|
||||||
|
echo(
|
||||||
|
"<video controls preload=\"none\">".
|
||||||
|
"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
|
||||||
|
"Dieser Browser scheint das Video nicht abspielen zu können.".
|
||||||
|
"</video>"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!--
|
||||||
|
<div id="links" class="galImgList">
|
||||||
|
<?php
|
||||||
|
foreach( $vidList as $vidKey => $vidEntry ){
|
||||||
|
echo( "<div>" );
|
||||||
|
echo "<img class=\"lazyload\" ".
|
||||||
|
// Wir haben unsere eigen noscript-Alternative (die kein img mehr
|
||||||
|
// ist!), deshalb brauchen wir diesen empfohlenen Fallback nicht!
|
||||||
|
// "src=\"".$vidEntry['posterSrc']."\"".
|
||||||
|
// "srcset=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"".
|
||||||
|
"id=\"Video".( $vidKey )."\" ".
|
||||||
|
// "data-src=\"".( $vidEntry['posterSrc'] )."\" ".
|
||||||
|
// "width=\"".$vidEntry['width']."\" ".
|
||||||
|
// "height=\"".$vidEntry['height']."\" ".
|
||||||
|
"alt=\"[".( $vidKey + 1 )."/".( count($vidList) )."]\" ".
|
||||||
|
"title=\"".( $wkName )." Video ".( $vidKey + 1 )." von ".( count($vidList) )."\" ".
|
||||||
|
"onclick=\"startGalleryShow(" . $vidKey . ");\"".
|
||||||
|
" />";
|
||||||
|
echo(
|
||||||
|
"<noscript>".
|
||||||
|
// "<video controls preload=\"none\" poster=\"".$vidEntry['posterSrc']."\" width=\"".$vidEntry['width']."\" height=\"".$vidEntry['height']."\">".
|
||||||
|
"<video controls preload=\"none\">".
|
||||||
|
"<source src=\"".$vidEntry['vidSrc']."\" type=\"video/webm\">".
|
||||||
|
"Dieser Browser scheint das Video nicht abspielen zu können.".
|
||||||
|
"</video>".
|
||||||
|
"</noscript>"
|
||||||
|
);
|
||||||
|
echo("</div>");
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div><!-- Ende galImgList -->
|
||||||
|
|
||||||
|
<!-- 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"><?php echo $wkName?></h2>
|
||||||
|
<a class="prev">‹</a>
|
||||||
|
<a class="next">›</a>
|
||||||
|
<a class="close">×</a>
|
||||||
|
<a class="play-pause"></a>
|
||||||
|
<ol class="indicator"></ol>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function startGalleryShow(startIndex = 0){
|
||||||
|
var videoList = [
|
||||||
|
<?php
|
||||||
|
foreach( $vidList as $vidEntry){
|
||||||
|
// echo "{href: '".$vidEntry['vidSrc']."', poster: '".$vidEntry['posterSrc']."', type: 'video/webm'},";
|
||||||
|
echo "{href: '".$vidEntry['vidSrc']."', type: 'video/webm'},";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
];
|
||||||
|
var gallery = blueimp.Gallery(
|
||||||
|
videoList,
|
||||||
|
{
|
||||||
|
/*
|
||||||
|
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.open("GET", callUrl, true); // true for asynchronous
|
||||||
|
xmlHttp.send(null);
|
||||||
|
},
|
||||||
|
*/
|
||||||
|
startSlideshow: true,
|
||||||
|
stretchImages: true,
|
||||||
|
index: startIndex,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
startGalleryShow();
|
||||||
|
};
|
||||||
|
// startGalleryShow();
|
||||||
|
</script>
|
||||||
|
<hr/>
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user