Files
cwsvJudo/homepage/redesign2018/markdownExperiment/src/imgGallery/gallery.template.php
marko a924af3503 Neuentwicklung der imgGallery
- ein neues template
	new file:   gallery.template.php
- die alten dateien für die imgGallery
	new file:   imgPicker.php
	new file:   index.php.tmpl
	new file:   indexDev.php.tmpl
	new file:   view.php.tmpl
2019-03-08 14:03:16 +01:00

420 lines
14 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
// lima-city verlangt dies um die Fehler zu erkennen
// funktioniert aber nicht!
ini_set('display_errors', 1);
error_reporting(E_ALL);
/// Eine allgemeine Vorlage für die Bildergallerien
///
/// @toDo: weitere Beschreibung
// @toDo: wofür brauchte ich diese Funktion?
////
// Funktionsdefinitionen
////
/// Check if expression is positive integer
function is_positive_integer($str){
return (is_numeric($str) && $str > 0 && $str == round($str));
}
function myUrlEncode($string) {
$entities = array( '%21', '%2A', '%27', '%28', '%29', '%3B', '%3A', '%40', '%26', '%3D', '%2B', '%24', '%2C', '%2F', '%3F', '%25', '%23', '%5B', '%5D');
$replacements = array( '!', '*', "'", "(", ")", ";", ":", "@", "&", "=", "+", "$", ",", "/", "?", "%", "#", "[", "]");
//return str_replace($entities, $replacements, urlencode($string));
return str_replace($entities, $replacements, rawurlencode($string));
}
function startsWith($haystack, $needle){
$length = strlen($needle);
return (substr($haystack, 0, $length) === $needle);
}
/// Abfrage der ausgewählten Bilder einer Galerie
function getPickedImages($aMysqlConn, $aGalId){
$retPickedImages = array();
/// Erstmal bisher ausgewählte Bilder abfragen ...
$queryPickedImages = sprintf(
"SELECT * FROM cwsvjudo.galImgPicker WHERE galId = '%s';",
$aMysqlConn->real_escape_string($aGalId)
);
// die($queryPickedImages);
$resultsPickedImages = $aMysqlConn->query($queryPickedImages);
/// @todo Wie kann ich hier sinnvoll einen Fehler zurückliefern? Nullpointer?
if( !$resultsPickedImages ){
$retMessage['error'] .= "Fehler ('".$aMysqlConn->error."') bei Datenbankabfrage '".$queryPickedImages."'<br />";
die( "Fehler ('".$aMysqlConn->error."') bei Datenbankabfrage '".$queryPickedImages."'<br />");
}
else{
while( $pickedImagesResult = $resultsPickedImages->fetch_assoc() ){
$retPickedImages = array_merge($retPickedImages, explode(',', $pickedImagesResult['pickedImages']) );
}
}
//echo("retPickedImages: ");print_r($retPickedImages); die();
return array_unique( $retPickedImages );
}/// Ende getPickedImages
/// Hilfsfunktion zum Anpassen der htmlDescription
function descrName($aName){
$retVal = "Bilder der Judoka des Chemnitzer WSV beim Wettkampf ".$aName;
if( strpos($aName, "Sommerabschlussgrillen") >= 0 ) $retVal = "Bilder der Judoka des Chemnitzer WSV beim ".$aName;
if( strpos($aName, "Jahrendefeier") >= 0 ) $retVal = "Bilder der Judoka des Chemnitzer WSV bei der ".$aName;
return $retVal;
}/// Ende descrName
/// Wählt aus den Gallerybildern eine Anzahl zum anzeigen aus
function displayImagesList($galleryData, $options = array() ){
if( is_positive_integer( $options['imageLimit']) )
return array_rand( $shiaiGalleryData['images'], $options['imageLimit']);
return $shiaiGalleryData['images'];
// folgend nur die alte Bildauswahl mit Favourites (zum Abschreiben bei
// zukünftigen Erweiterungen)
///// Überschreiben der imgList mit den ausgewählten Bildern
//$allImgList = $imgList; // Sicherungskopie
//if( count($pickedImages) > 24 )
//$pickedImages = array_rand( $pickedImages, 24);
//else{
//$restImages = array_diff( $allImgList, $pickedImages );
//foreach( array_rand( $restImages, min(24, count($restImages))-count($pickedImages) ) as $k ) {
//$pickedImages[] = $restImages[$k];
//}
//}
//$imgList = $pickedImages;
//// echo("imgList: "); print_r($imgList);
///// @todo ein Sortieren nach dem ursprünglichen Index fehlt
//usort($imgList, function($a, $b) use($allImgList){return array_search($a, $allImgList) > array_search($b, $allImgList);} );
//$imgList = array_values( $imgList );// Zum reNummerieren
//// echo("imgList: "); print_r($imgList);
//if( $showAllMode == "true") $imgList = $allImgList;
//$imgInfos = array();
//foreach( $imgList as $imgName ){
//if(startsWith($imgName, "images/")){
//array_push( $imgInfos, @getimagesize(str_replace("images", "thumbs", str_replace(".jpg", ".png", $imgName))));
//}
//else{
//array_push( $imgInfos, @getimagesize("thumbs/".str_replace(".jpg", ".png", $imgName)));
//}
//}
}
////
// Main
////
$basePath = $_SERVER['DOCUMENT_ROOT'];
$requestPath = $_SERVER['REQUEST_URI'];
if( $_GET['showAll'] == "true" )
$showAllMode = "true";
else
$showAllMode = "false";
// eine allgemeine Konfigurationsdatei
if( file_exists("config.inc.php") )
include_once("config.inc.php");
// für's erste werden die Verzeichnisse direkt aufgerufen
// - @toDo: Das letzte muss kein Verzeichnis sein!
// - @toDo: Fehlerbehandlung??
// - für's erste gehen wir davon aus, dass ein korrektes Verzeichnis
// übergeben wurde
$dirBreadcrumbs = explode( "/", $_SERVER["REQUEST_URI"] );
if( $dirBreadcrumbs[1] != "photoalben" ){
echo("warning: wrong path!\n");
var_dump($_SERVER);
var_dump($dirBreadcrumbs);
}
// Wettkampfname und Wettkampfdatum wurden früher™ mal in der
// 'config.inc.php' des Galerieordners
if(file_exists($requestPath."config.inc.php")){
include_once($requestPath."config.inc.php");
if($wkName)
$shiaiGalleryData['name'] = $wkName;
}
// So soll es mal werden: Die Daten der Galerie in einer jsonDatei
if(file_exists($requestPath."/shiaiGallery.json"))
$shiaiGalleryData = json_decode(
get_file_contents( $requestPath."shiaiGallery.json"),
true
);
// Sollte jetzt die Galerie noch leer sein, dann ist anzunehmen,
// dass noch keine definiert wurden (weder per json, noch durch
// inc.php). Damit nie nichts angezeigt wird, laden wir sie aus dem
// Verzeichnis.
// @toDo: Übergangslösung! Es sollte möglich sein, eine leere Galerie
// zu erzeugen. Es sollte ein allgemeinerer ImageSuchAlgorithmus her!
if( empty( $shiaiGalleryData['images'] ) ){
$imgList = glob( $basePath.$requestPath."images/*.jpg" );
// Wie es scheint ist sind die Dateinamen auf dem bplaced in "ISO-8859-1"
// Die Dateinamen auf dem Server (so wie sie die glob-Funktion
// liefert) müssen nicht in "UTF-8" sein! deshalb eine
// Konvertierung, denn das htmlDokument soll dann in "UTF-8" sein.
array_walk(
$imgList,
function (&$value, $key, $basePath) {
$value = iconv( "ISO-8859-1", "UTF-8", $value);
// @toDo: evtl. hier schon die Dateinamen urlEncoden ?
// $value=implode('/', array_map('myUrlEncode', explode('/', $value)));
$value = str_replace($basePath, "", $value);
},
$basePath
);
$shiaiGalleryData['images'] = array_map(
function($value){
return array(
'imgSrc' => $value,
'tbnSrc' => str_replace( "/images/", "/thumbs/", str_replace( ".jpg", ".png", $value))
);
},
$imgList
);
}
//var_dump($shiaiGalleryData);
//exit();
if( $showAllMode == "true" ){
$imgList = displayImagesList($shiaiGalleryData['images']);
}
else
$imgList = displayImagesList($shiaiGalleryData['images'], array('imagesLimit'=>24));
array_walk(
$imgList,
function (&$value, $key, $basePath) {
// $value = iconv( "ISO-8859-1", "UTF-8", $value);
// @toDo: evtl. hier schon die Dateinamen urlEncoden ?
$value['imgSrc']=implode('/', array_map('myUrlEncode', explode('/', $value['imgSrc'])));
$value['tbnSrc']=implode('/', array_map('myUrlEncode', explode('/', $value['tbnSrc'])));
// $value = str_replace($basePath, "", $value);
},
$basePath
);
if( empty($shiaiGalleryData['name']) )
$shiaiGalleryData['name'] = "ohne Namen";
?>
<!DOCTYPE HTML>
<html lang="de">
<head>
<title><?php echo $wkName?> - Bilderalbum<?php echo( !empty($showAllMode)?($showAllMode == "true" ? " - alle Bilder" : "") : "");?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="
<?php
echo descrName($wkName);
echo( !empty($showAllMode)?($showAllMode == "true" ? " - alle Bilder" : "") : "");
?>
">
<meta name="keywords" content="Album, Fotos">
<!-- 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']?>" />
<!--https://github.com/aFarkas/lazysizes-->
<script src="/ressourcen/jsLib/lazysizes.min.js" async=""></script>
<style>
.no-js img.lazyload {
display: none;
}
</style>
<!-- BluimpGallery Zeug -->
<link rel="stylesheet" href="/ressourcen/blueimpGallery/css/blueimp-gallery.min.css">
<script src="/ressourcen/blueimpGallery/js/blueimp-gallery.min.js"></script>
<style>
.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="http://cwsvjudo.bplaced.net/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
}
/// Ende MessageBox
?>
<h1 class="centerText" >
Photoalbum [<b><?php echo $shiaiGalleryData['name'];?></b>]
</h1>
<?php
if( $showAllMode == "true" ){
?>
<p class="centerText smallFont">
[<?php echo count($shiaiGalleryData['images'])?> Bilder]
</p>
<?php
}
else{
?>
<!--
<a href=<?php echo( "\"?galId=".(empty($galleryId)?"0":$galleryId)."&showAll=true".($chooseMode=="true"?"&chooseMode=true":"")."\"");?>><div class="navButton" style="width: 100%;">Alle Bilder einblenden </div></a>
-->
<a href="/?showAll=true"><div class="navButton" style="width: 100%;">Alle Bilder einblenden </div></a>
<?php
}
?>
<p class="centerText smallFont">
Auf die jeweiligen Bilder klicken um eine größere Ansicht zu bekommen.
</p>
<hr/>
<style type="text/css">
.galImgList{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
</style>
<?php
// Vorerst verworfen
//if( $chooseMode == "true" ){
//echo( "<form action=\"http://cwsvjudo.bplaced.net/ressourcen/phpLib/imgGallery/imgPicker.php\" method=\"post\">" );
//echo( "<input type=\"hidden\" name=\"galId\" value=\"".$galleryId."\" />" );
//}
?>
<div id="links" class="galImgList">
<?php
$imgSize = count( $imgList );
for( $imgIndex = 0; $imgIndex < $imgSize; ++$imgIndex){
// echo( "<div ".( ($chooseMode=="true")?"style=\"border: 1px solid black;\"":"" ).">" );
//if( $chooseMode == "true" ){
//echo("<label>");
//echo( "<input type=\"checkbox\" name=\"pickedImages[]\" value=\"".$imgList[$imgIndex]."\" />" );
//}
echo "<img class=\"lazyload\" ".
"id=\"Image".( $imgIndex )."\" ".
"data-src=\"".( startsWith( $imgList[$imgIndex], "images/")?str_replace("images", "thumbs", str_replace(".jpg", ".png", $imgList[$imgIndex])):"./thumbs/".str_replace(".jpg", ".png", $imgList[$imgIndex]) )."\" ".
// $imgInfos[$imgIndex][3]." ".
"alt=\"[".( $imgIndex )."/".( $imgSize )."]\" ".
"title=\"".( $wkName )." Bild ".( $imgIndex +1 )." von ".( $imgSize )."\" ".
"onclick=\"startGalleryShow(" . $imgIndex . ");\"".
" />";
// if( $chooseMode == "true" ) echo( "</label>" );
echo("</div>");
}
?>
</div><!-- Ende galImgList -->
<?php
//if( $chooseMode == "true" ){
//echo( "<button type=\"submit\">Eingaben absenden</button>" );
//echo( "</form>" );
//}
?>
<noscript>
<div id="links" class="galImgList">
<?php
$imgSize = count( $imgList );
for( $imgIndex = 0; $imgIndex < $imgSize; ++$imgIndex){
echo
"\t\t\t\t<span>".
"<a href=\"view.php?index=".( $imgIndex )."\" >".
"<img id=\"Image".( $imgIndex + 1)."\" ".
//"src=\"".( startsWith( $imgList[$imgIndex], "images/")?str_replace("images", "thumbs", str_replace(".jpg", ".png", $imgList[$imgIndex])):"./thumbs/".str_replace(".jpg", ".png", $imgList[$imgIndex]) )."\" ".
"src=\"".$imgList[$imgIndex]['tbnSrc']."\" ".
"alt=\"[".( $imgIndex )."/".( $imgSize )."]\" ".
"title=\"".( $shiaiGalleryData['name'] )." Bild ".( $imgIndex + 1 )." von ".( $imgSize )."\" ".
"/>".
"</a>".
"</span>\n";
}
?>
</div>
</noscript>
</div>
<!-- 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 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>
function startGalleryShow(startIndex = 0){
var imgList = [
<?php
$imgSize = count( $imgList );
for( $imgIndex = 0; $imgIndex < $imgSize; ++$imgIndex){
// echo "\"".( $imgList[ $imgIndex ] )."\", ";
echo "\"".( $imgList[ $imgIndex ]['imgSrc'] )."\", ";
}
?>];
var gallery = blueimp.Gallery(
imgList,
{
onslide: function (index, slide) {
var pageUrl = encodeURIComponent( window.location.href ) + "?index=" + index.toString();
var pageTitle = document.title + " [" + index.toString() + "]";
},
startSlideshow: true,
stretchImages: true,
index: startIndex,
}
);
};
window.onload = function () {
startGalleryShow();
};
// startGalleryShow();
</script>
<hr/>
</body>
</html>