Frage
Antwort
So schauts aus wenn die Stelle aus meiner Ergänzung Aus kommentiert ist.
So wenn es drin ist. Die einzige änderung ist dieses Bild schon beim Button mit zu geben.
Nun die dazugehörige PHP Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<?php
$timestamp = date("YmdHis");
?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/style.css?v=<?php echo $timestamp;?>">
<link rel="icon" type="image/jpg" href="../Image/icon.JPG">
<title>Galerie - Stagelight Jochen Schlattmann</title>
<style>
</style>
</head>
<body>
<header id="fixiert">
<nav id="MenueBox">
<a class="#MenueLinks"href="../index.php" >
<img id="Logo" src="../Image/Logo.jpg">
</a>
<a class="MenueLinks" href="../index.php">
Startseite
</a>
<a class="MenueLinks" href="Leistungen.php">
Leistungen
</a>
<a class="MenueLinks" href="Profil.php">
Profil
</a>
<a class="MenueLinks" id="aktuell" tabindex="0" aria-current="page">Galerie
</a>
<a class="MenueLinks" href="Partner.php">
Partner
</a>
<a class="MenueLinks" href="Impressum.php">
Impressum
</a>
<a class="MenueLinks" href="AGB.php">
AGB
</a>
</nav>
</header>
<div id="jannisfehler"></div>
<h1>Galerie</h1>
<div id="spacingZurück"></div>
<div id="gallerie">
</div>
<?php include ("../php/footer.php"); ?>
<?php
$verzeichnis = "../Image/FavStagelight";
$ordner = [];
$ordner2 = [];
$ordner3 = [];
if ( is_dir ( $verzeichnis ))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
$ordner[] = $file;
}
closedir($handle);
}
}
array_splice($ordner,0,2);
foreach($ordner AS $ordnerName)
{
$ordner2[] = $ordnerName;
if ( is_dir ( $verzeichnis. "/" .$ordnerName ))
{
if ( $handle = opendir($verzeichnis."/".$ordnerName) )
{
while (($file = readdir($handle)) !== false)
{
$ordner2[] = $file;
}
closedir($handle);
array_splice($ordner2,1,3);
}
}
$ordner3[] = $ordner2;
$ordner2 = array();
}
$json = htmlspecialchars(json_encode($ordner3 ), ENT_QUOTES, 'UTF-8');
?>
<div data-json="<?= $json ?>"></div>
<script src="../js/galerieScript.js"></script>
</body>
</html>
Und das JS dazu:
const dataContainer = document.querySelector("[data-json]");
const data = JSON.parse(dataContainer.dataset.json);
function galerie(ordner, nummer,){
for(var i = 1; i<data[nummer].length;i++){
console.log(1);
var img = new Image(200,150);
img.src = "../Image/FavStagelight/"+ordner+"/"+data[nummer][i];
img.id="galerieBilder";
var but = document.createElement("button");
but.id = "galerieButton";
but.appendChild(img);
var Ausgabebereich = document.getElementById('main');
Ausgabebereich.appendChild(but);
}
}
function galerieErschaffen(){
var main = document.createElement("main");
main.id = "main";
var Ausgabebereich = document.getElementById('gallerie');
Ausgabebereich.appendChild(main);
Ausgabebereich = document.getElementById("main");
ordnerButtonsErschaffen();
}
function zurueck(){
if (document.getElementById('main')) {
var main = document.getElementById('main');
main.parentNode.removeChild(main);
}
if (document.getElementById('galerieZurück')) {
var galerieZurückButton = document.getElementById('galerieZurück');
galerieZurückButton.parentNode.removeChild(galerieZurückButton);
}
galerieErschaffen();
}
function zurückButtonuBilder(evt){
const ordner = evt.currentTarget.innerHTML;
const nummer = evt.currentTarget.data;
console.log(nummer);
var but = document.createElement("button");
but.innerHTML = "Zurück";
but.id = "galerieZurück";
var Ausgabebereich = document.getElementById('spacingZurück');
Ausgabebereich.appendChild(but);
but.addEventListener("click", zurueck);
if (document.getElementById('main')) {
var maindel = document.getElementById('main');
maindel.parentNode.removeChild(maindel);
var main = document.createElement("main");
main.id = "main";
var Ausgabebereich = document.getElementById('gallerie');
Ausgabebereich.appendChild(main);
}
galerie(ordner, nummer);
}
function ordnerButtonsErschaffen(){
// console.log(dataContainer); testzwecks
if (dataContainer) {
var Ausgabebereich = document.getElementById('main');
for(var i = 0; i<data.length; i++){
console.log(data[i][0]);
var but = document.createElement("button");
but.innerHTML = data[i][0];
var img = new Image(200,150);
img.src = "../Image/FavStagelight/"+data[i][0]+"/"+data[i][1];
but.appendChild(img);
but.id = "button";
but.data = i;
Ausgabebereich.appendChild(but);
but.addEventListener("click", zurückButtonuBilder);
}
}
}
galerieErschaffen();
Hier ist es noch mit drin.