STB/foto/views/inc/foto_grid.inc.php

<?php
  include __DIR__ . "/../layout/header_drop.php";
  include __DIR__ . "/../inc/foto_nav.php";
  include __DIR__ . "/../css/image_grid.css";?>

  <div class="header" id="myHeader">
    <h1>Image Grid Australien</h1>
    <p>Change the grid view:
    <button class="btn" onclick="one()">1</button>
    <button class="btn active" onclick="two()">2</button>
    <button class="btn" onclick="four()">4</button></p>
  </div><?php

  $titel = array("",
  // Hotel
  "Hinflug","Hinflug_1","Speisesaal",
  "Drea_tanzt_mit_Oliver_und_Stan", "Drea_tanzt_Oliver", "Drea_tanzt_mit_Stan",
  "Drea in der Strassenschlucht",
  // Sydney
  "Blick_0", "Blick_1", "Drea entsteigt dem Meer",
  "Blick_2", "Blick_3", "Blick_4",
  "Blick_5", "Drea am Wasser", "Drea an der Brücke",
  "Drea an der Oper", "Cassius Clay", "Der Pianist",
  "Unter der Brücke",
  // Bauwerke
  "Harbor-Brücke", "Hafen bei Nacht", "Hafen bei Nacht",
  "Oper", "Oper", "Queen Victoria Building",
  "Blick nach oben", "Skyline", "Drea_an_der_Brücke",
  "Hafen bei Nacht",
  "Drea am Wasser", "Uhr am Bahnhof", "Blumenkorb",
  // Natur
  "Abendsonne", "Flussbett", "Koala", "Gebirge", "Pinguine",
  // Allice Springs
  "Aussichtsplattform", "Bergkette", "Didgeridoo_Spieler",
  "Museum", "Museum",  "Landschaft",
  "landschaft", "Straussbaby","Drea mit Baby",
  "Drea_und_Strausse", "Entfernungen", "The Lost Camel",
  "Hotel", "Hotellanlage", "Pool",
  "Roger", "Steine", "Hinweisschilder",
  "Strauss", "Strauss",
  // Wahrzeichen
  "Ayers-Rock", "Ayers-Rock", "Drea vor Uluru",
  // Shanghai
  "Riesenrad",  "Drea geniesst",
  "Buntes", "Feierabend", "Sehenswert",
  "Skyline", "Strassenschmuck", "Buntes am Abend",
  "Riesenrad","Hotelabend", "Moped",
  "Hausfront", "Hausfront", "Hausfront",
  "Hausbild", "Hausbild", "Palast",
  "Kuh", "Wandbild", "Hausfront",
  "MBS", "Stadtbild", "Hochhaus",
  "Hochhaus", "Stadtbild", "City",
  "Einkauspalast", "City", "City",
  "City", "Riesenrad", "",
  "", "", "", "");

  $thema = "australien";
  $unter_thema = $anz_themen = $alle = $bilder = array();  // Themenunterschrift - Anzahl Bilder vom gleichen Thema
  $path_images = __DIR__ . "/../images/".$thema."/";
  $base_ordner = "/home/foto/views/images/";
  $unterordner = scandir($path_images); // $unterordner lesen

  $i = 1;                     // 1. Bild
  foreach($unterordner AS $bild_thema){
    if ($bild_thema != "." && $bild_thema != ".." && $bild_thema != "klein" && $bild_thema != "_notes" &&
      $bild_thema != ".DS_Store" && $bild_thema != "Thumbs.db") {
      $unter_thema[] = $bild_thema;         // gültiges Unterthema in array eintragen

      $ordner = $base_ordner.$thema."/".$bild_thema;

      $allebilder = scandir($path_images.$bild_thema);
      $alle[] = $allebilder;                // anzahl Themen
      foreach ($allebilder as $bild) {      //Ordner "images" auslesen
        if ( substr( $bild, -4) == ".jpg"){ // Dateiname gültig
          $bilder[] = $bild;  // Sammelt alle Bilder
          $i++;
        }
      }
      $anz_themen[] = $i-1;   //anzahl Themen
    }
  }
  $anz_images = $i;           // Anzahl Bilder

  $n = floor(count($bilder) / 4);  // bilder pro spalte
  echo "<center>Es werden ".$n." Bilder pro Spalte angezeigt (auswahl = 4) </center>";

  $rest = count($alle) % 4;       // Rest
  $anz_themen[] = $i + $rest;     // tats. Anzahl Bilder
  $unter_thema[] = "Ende";        // verhinder Fehlermeldung

  $l = 1;                    // 1. Bold
  $anz = $n;                      // Anzahl Bilder pro Spalte =>  $anz / 4
  $i = 1;   //1. Bild
  $m = 0;   //1. Matrix-Eintrag
  $g = 0;   // Gesamtzahl Bilder
  echo "<div class=\"row\">";
    while ($g <= $anz_images) {
      for ($i = 1; $i<=4; $i++) {
        echo "<div class=\"column\">";
        for ($j = $l; $j <= $n; $j++) {           // Anzahl pro Spalte
          if ($g <= $anz_images){ ?>
            <img src="<?php echo $base_ordner.$thema."/".$unter_thema[$m]."/".$bilder[$g];?>"
             alt="hbc fotos" style="width:100%;"> <?php
            $g++;
            echo $unter_thema[$m].": ".$titel[$g];
            if ($g == ($anz_themen[$m])) {    // Themenzähler
              $m = $m+1;
            }
          }
        }
        echo "</div>";
        $l = $n;                      // weitere 4 Bilder pro Spalte
        $n = $n+$anz;                   // nächste Spalte mit n Bildern
      }
    }
    echo "</div>";
?>

<script>
  // Get the elements with class="column"
  var elements = document.getElementsByClassName("column");
  var i;            // Declare a loop variable
  function one() {  // Full-width images
    for (i = 0; i < elements.length; i++) {
        elements[i].style.msFlex = "100%";  // IE10
        elements[i].style.flex = "100%";
    }
  }

  // Two images side by side
  function two() {
    for (i = 0; i < elements.length; i++) {
        elements[i].style.msFlex = "50%";  // IE10
        elements[i].style.flex = "50%";
    }
  }

  // Four images side by side
  function four() {
    for (i = 0; i < elements.length; i++) {
        elements[i].style.msFlex = "25%";  // IE10
        elements[i].style.flex = "25%";
    }
  }

  // Add active class to the current button (highlight it)
  var header = document.getElementById("myHeader");
  var btns = header.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }
</script>

<?php
  include __DIR__ . "/../js/filter_1.inc.js";
  include __DIR__ . "/../layout/footer.php";
?>