fotos eingefügt

2025-01-15 20:05:21 +01:00 · 2025-01-15 20:05:21 +01:00 · 3c98e6568a
parent 37019416b2
commit 3c98e6568a
1030 changed files with 3781 additions and 0 deletions
--- a/foto/.DS_Store
+++ b/foto/.DS_Store
--- a/foto/._.DS_Store
+++ b/foto/._.DS_Store
--- a/foto/autoload.php
+++ b/foto/autoload.php
@ -0,0 +1,33 @@
+<?php
+/*
+ * An example of a project-specific implementation.
+ * @param string $class The fully-qualified class name.
+ * @return void
+ */
+spl_autoload_register(function ($class) {
+    // project-specific namespace prefix
+    $prefix = 'App\\';
+    // base directory for the namespace $prefix
+    // __DIR__  entspricht dem aktuellen Pfad
+    $base_dir = __DIR__ .'/src/';
+    //$base_dir = "/src/";
+    // does the class use the namespace prefix?
+    $len = strlen($prefix);
+    if (strncmp($prefix, $class, $len) !== 0) {
+        // no, move to the next registered autoloader
+        return;
+    }
+
+    // get the relative class name
+    $relative_class = substr($class, $len);
+    // replace the namespace prefix with the base directory, replace namespace
+    // separators with directory separators in the relative class name, append
+    // with .php
+    //echo "</br>relative class: ".$relative_class; //die();
+    $file = ($base_dir . str_replace('\\', '/', $relative_class) . '.php');
+    //echo "</br>file: ".$file; //die();
+    // if the file exists, require it
+    if (file_exists($file)) {
+        require $file;
+    }
+});
--- a/foto/exceptions.php
+++ b/foto/exceptions.php
@ -0,0 +1,4 @@
+<?php
+
+
+?>
--- a/foto/init.php
+++ b/foto/init.php
@ -0,0 +1,31 @@
+
+<?php
+
+require __DIR__ . "/autoload.php";
+//require __DIR__ . "/database.php"; wird im $container = new App\Core\Container(); gebildet
+
+// Die Function e($str) wandelt einen string so um, dass zeichen wie ", "", '', >, <; in
+// entsprechende &quot, &lt, &gt, ... gewandelt werden. XSS => cross site scripting
+function e($str) {
+  return (htmlentities($str, ENT_QUOTES, 'UTF-8'));
+}
+
+function date_german($datum) {
+list($jahr, $monat, $tag) = explode("-", $datum);
+return("$tag.$monat.$jahr"); // Ausgabe: 20.10.2013
+}
+// Container dient zur erzeugung von instances nach festgelegten Bauanleitungen (receipts)
+// Hier wird eine neue class gebildet
+
+$container = new App\Core\Container();
+//var_dump($container);         // erster Test, ob der code läuft
+
+//$usersRepository = $container->make("usersRepository");
+//var_dump($usersRepository);   // zweiter Test, nachdem UsersRepository erzeugt wurde
+
+//var_dump($usersRepository->all());   // dritter Test, alle user auslesen; function aus AbstractRepostory
+
+// nächster Test, finde user "Erik"; function aus init.php
+//var_dump($usersRepository->findByUserName("test"));
+//die();
+?>
--- a/foto/public/counter.txt
+++ b/foto/public/counter.txt
@ -0,0 +1 @@
+10710
--- a/foto/public/index.php
+++ b/foto/public/index.php
@ -0,0 +1,119 @@
+<?php
+  session_set_cookie_params(60);	// 60 sec keine Erhöhung des counters
+  // counter zählt die Aurufe in Datei counter.text
+  session_start();
+
+  $counterstand = htmlentities(intval(file_get_contents("counter.txt")));
+  if(!isset($_SESSION['counter_ip'])){
+    $counterstand++;                         //$counterstand erhöhen;
+    file_put_contents("counter.txt", $counterstand);
+    $_SESSION['counter_ip'] = true;
+  }
+  require __DIR__ . ("/../init.php");
+  $pathInfo = $_SERVER['PATH_INFO'];
+
+  $routes = [
+    '/homepages' => [
+      'controller' => 'loginController',
+      'method' => 'homepages'                // show Methode anwenden
+    ],
+    '/login' => [
+      'controller' => 'loginController',
+      'method' => 'login'                    // index Methode anwenden
+    ],
+    '/logout' => [
+      'controller' => 'loginController',
+      'method' => 'logout'                    // index Methode anwenden
+    ],
+    '/index' => [
+      'controller' => 'loginController',
+      'method' => 'index'                    // index Methode anwenden
+    ],
+    '/fotos' => [
+      'controller' => 'loginController',
+      'method' => 'fotos'                    // index Methode anwenden
+    ],
+    '/portfolio' => [
+      'controller' => 'loginController',
+      'method' => 'portfolio'                    // index Methode anwenden
+    ],
+    '/carussel' => [
+      'controller' => 'loginController',
+      'method' => 'carussel'                    // index Methode anwenden
+    ],
+    '/ostfriesland' => [
+      'controller' => 'loginController',
+      'method' => 'ostfriesland'                    // index Methode anwenden
+    ],
+    '/rheinruhr' => [
+      'controller' => 'loginController',
+      'method' => 'rheinruhr'                    // index Methode anwenden
+    ],
+    '/nordpark' => [
+      'controller' => 'loginController',
+      'method' => 'nordpark'                    // index Methode anwenden
+    ],
+    '/natur' => [
+      'controller' => 'loginController',
+      'method' => 'natur'                    // index Methode anwenden
+    ],
+    '/bonsai' => [
+      'controller' => 'loginController',
+      'method' => 'bonsai'                    // index Methode anwenden
+    ],
+    '/familie' => [
+      'controller' => 'loginController',
+      'method' => 'familie'                    // index Methode anwenden
+    ],
+    '/auswahl' => [
+      'controller' => 'loginController',
+      'method' => 'auswahl'                    // index Methode anwenden
+    ],
+    '/grid' => [
+      'controller' => 'loginController',
+      'method' => 'grid'                    // index Methode anwenden
+    ],
+    '/test' => [
+      'controller' => 'loginController',
+      'method' => 'test'                    // index Methode anwenden
+    ],
+    '/australien' => [
+      'controller' => 'loginController',
+      'method' => 'australien'                        // index Methode anwenden
+    ],
+    '/st' => [
+      'controller' => 'loginController',
+      'method' => 'st'                        // index Methode anwenden
+    ],
+    '/se' => [
+      'controller' => 'loginController',
+      'method' => 'se'                        // index Methode anwenden
+    ],
+    '/about' => [
+      'controller' => 'loginController',
+      'method' => 'about'                    // index Methode anwenden
+    ],
+    '/dashboard' => [
+      'controller' => 'loginController',
+      'method' => 'dashboard'                // dashboard Methode anwenden
+    ],
+    '/impressum' => [
+      'controller' => 'loginController',
+      'method' => 'impressum'                    // index Methode anwenden
+    ],
+  ];
+
+// Wenn in der PATH_INFO eine seite gespeichert wurde (z.B. /index oder /post) kann
+// sie aus dem array $routes ausgelesen werden. Im array ist gespeichert, welcher
+// controller zu verwenden ist und welche Methode des controllers anzuwenden ist
+
+  if (isset($routes[$pathInfo])) {      // ist eine PATH_INFO gesetzt?
+    $route = $routes[$pathInfo];        // zwischenspeichern
+    $controller = $container->make($route['controller']); // make für den controller setzen
+    $method = $route['method'];         // Methode holen
+    $controller->$method();             // Controller führt Methode aus
+  }
+  else {
+    header("Location: login");
+  }
+?>
--- a/foto/src/Core/AbstractController.php
+++ b/foto/src/Core/AbstractController.php
@ -0,0 +1,14 @@
+<?php
+
+namespace App\Core;
+
+abstract class AbstractController
+{
+  protected function render($view, $params)
+  {
+    extract($params);
+    include __DIR__ . "/../../views/{$view}.php";
+  }
+}
+
+?>
--- a/foto/src/Core/AbstractModel.php
+++ b/foto/src/Core/AbstractModel.php
@ -0,0 +1,26 @@
+<?php
+
+namespace app\Core;
+use ArrayAccess;
+
+  abstract class AbstractModel implements ArrayAccess
+  {
+
+      public function offsetExists ($offset) {
+        return isset($this->$offset);
+      }
+
+      public function offsetGet ($offset) {
+        return $this->$offset;
+      }
+
+      public function offsetSet ($offset, $value) {
+        $this->$offset = $value;
+      }
+
+      public function offsetUnset ($offset) {
+        unset ($this->$offset);
+      }
+  }
+
+ ?>
--- a/foto/src/Core/AbstractRepository.php
+++ b/foto/src/Core/AbstractRepository.php
@ -0,0 +1,36 @@
+<?php
+namespace App\Core;
+use PDO;
+
+abstract class AbstractRepository {
+
+  protected $pdo;
+
+  public function __construct(PDO $pdo)
+  {
+    $this->pdo = $pdo;
+  }
+
+  abstract public function getTableName();
+  abstract public function getModelName();
+
+  function all() {
+    $table = $this->getTableName();
+    $model = $this->getModelName();
+    $stmt = $this->pdo->query("SELECT * FROM `$table`");
+    $posts = $stmt->fetchALL(PDO::FETCH_CLASS, $model);
+    return $posts;
+  }
+
+  function find($id) {
+    $table = $this->getTableName();
+    $model = $this->getModelName();
+
+    $stmt = $this->pdo->prepare("SELECT * FROM `$table` WHERE id = :id");
+    $stmt->execute(['id' => $id]);
+    $stmt->setFetchMode(PDO::FETCH_CLASS, $model);
+    $post = $stmt->fetch(PDO::FETCH_CLASS);
+    return $post;
+  }
+}
+ ?>
--- a/foto/src/Core/Container.php
+++ b/foto/src/Core/Container.php
@ -0,0 +1,88 @@
+<?php
+namespace App\Core;
+use PDO;
+use App\Post\PostsRepository;
+use App\Post\CommentsRepository;
+use App\Post\PostsController;
+use App\User\UsersRepository;
+use App\User\LoginController;
+use App\User\LoginService;
+
+class Container
+{
+  private $receips = [];           // Bauanleitung für verschiedene instances
+  private $instances = [];
+
+  public function __construct() {
+    $this->receips = [
+      'loginService' => function() {
+        return new LoginService(
+          $this->make('usersRepository')
+        );
+      },
+      'loginController' => function() {
+        return new LoginController(
+          $this->make('loginService')
+        );
+      },
+      'postsController' => function() {
+        return new PostsController(         //neuer PostsController
+           $this->make('postsRepository'),
+           $this->make('commentsRepository')
+        );
+      },
+      'usersRepository' => function() {
+        return new UsersRepository(
+          $this->make("pdo")
+        );
+      },
+      'postsRepository' => function() {
+        return new PostsRepository(
+          $this->make("pdo")
+        );
+      },
+      'commentsRepository' => function() {
+        return new CommentsRepository(
+          $this->make("pdo")
+        );
+      },
+      'pdo' => function() {
+        $servername = "mysqle8e6.netcup.net";
+        $port = "3306";
+        $username = "k46054_hbc";
+        $password = "cXZm/E97dKvZy6Cg*";
+        $dbname="k46054_hbc";
+        
+        $pdo = new PDO("mysql:host=$servername;dbname=$dbname;port=$port", $username, $password);
+
+        $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
+        return $pdo;
+      }
+/*      'pdo' => function() {
+        $pdo = new PDO(
+          'mysql:host=localhost;dbname=blog;charset=utf8',
+          'blog',
+          'nRwwKR2CqfQuuBb1'
+        );
+        // Attribut wegen Sicherheit auf false setzen
+        $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
+        return $pdo;
+      }
+*/    ];
+  }
+
+  public function make($name) {
+    //echo $name."</br>"; //die();
+    if (!empty($this->instances[$name])){
+      return $this->instances[$name]; // DB-Verbindung besteht
+    }
+    // sonst ERZEUGE return $this->instances[$name
+    if (isset($this->receips[$name])) {
+      $this->instances[$name] = $this->receips[$name]();
+    }
+    //$nam = $this->instances[$name];
+    //var_dump($nam); //die();
+    return $this->instances[$name];
+  }
+}
+?>
--- a/foto/src/User/LoginController.php
+++ b/foto/src/User/LoginController.php
@ -0,0 +1,127 @@
+<?php
+namespace App\User;
+use App\Core\AbstractController;
+
+class LoginController extends AbstractController {
+
+  public function __construct(LoginService $loginService){
+    $this->loginService = $loginService;
+  }
+
+  public function homepages() {
+      //$this->loginService->check();
+    $this->render("user/homepages", []);
+  }
+  public function index(){
+    $this->loginService->index();
+    $this->render("user/index", []);
+  }
+  public function fotos(){
+    $this->loginService->fotos();
+    $this->render("fotos/fotos", []);
+  }
+  public function portfolio(){
+    $this->loginService->portfolio();
+    $this->render("fotos/portfolio", []);
+  }
+  public function carussel(){
+    $this->loginService->carussel();
+    $this->render("fotos/carussel", []);
+  }
+  public function ostfriesland(){
+    $this->loginService->ostfriesland();
+    $this->render("fotos/ostfriesland", []);
+  }
+  public function rheinruhr(){
+    $this->loginService->rheinruhr();
+    $this->render("fotos/rheinruhr", []);
+  }
+  public function nordpark(){
+    $this->loginService->nordpark();
+    $this->render("fotos/nordpark", []);
+  }
+  public function natur(){
+    $this->loginService->natur();
+    $this->render("fotos/natur", []);
+  }
+  public function bonsai(){
+    $this->loginService->bonsai();
+    $this->render("fotos/bonsai", []);
+  }
+  public function auswahl(){
+    $this->loginService->auswahl();
+    $this->render("fotos/auswahl", []);
+  }
+  public function familie(){
+    $this->loginService->familie();
+    $this->render("fotos/familie", []);
+  }
+  public function grid(){
+    $this->loginService->grid();
+    $this->render("fotos/grid", []);
+  }
+  public function test(){
+    $this->loginService->test();
+    $this->render("fotos/test", []);
+  }
+  public function australien(){
+    $this->loginService->australien();
+    $page = "australien";
+    //$this->loginService->check_permission($page);
+    $this->render("fotos/australien", []);
+  }
+  public function st(){
+    $this->loginService->st();
+    $page = "st";
+    $this->loginService->check_permission($page);
+    $this->render("fotos/st", []);
+  }
+  public function se(){
+    $this->loginService->se();
+    $page = "se";
+    $this->loginService->check_permission($page);
+    $this->render("fotos/se", []);
+  }
+    public function about(){
+    $this->loginService->about();
+    $this->render("fotos/about", []);
+  }
+  public function impressum(){
+    $this->loginService->impressum();
+    $this->render("user/impressum", []);
+  }
+  public function dashboard(){
+    $this->loginService->check();
+    $this->render("user/dashboard", []);
+  }
+  public function logout() {
+    $this->loginService->logout();
+    $_SESSION['seite'] = "";
+    $_SESSION['login'] = "";
+    header("Location: login");        // weiterleitung zum login
+  }
+  public function login(){
+    $error = false;
+    if(!empty($_POST['username']) And !empty($_POST['password'])) {
+        $username = $_POST['username'];
+        $password = $_POST['password'];
+        //echo $username." - ".$password; die();
+        if ($this->loginService->attempt($username, $password)) {
+          $_SESSION['login'] = $username;
+          //echo $_SESSION['login']." - ";
+          //echo $username." -> ".$_SESSION['seite']; die();
+          header ("Location: ".$_SESSION['seite']);
+          //header ("Location: dashboard");
+          return;
+        } else {
+          $error = true;
+          unset($_SESSION['login']);
+          unset($_SESSION['seite']);
+        }
+    }
+    $this->render("user/login", [
+      'error' => $error               // Übergabe an view
+    ]);
+  }
+}
+?>
--- a/foto/src/User/LoginService.php
+++ b/foto/src/User/LoginService.php
@ -0,0 +1,147 @@
+<?php
+namespace App\User;
+
+class LoginService {
+
+  public function __construct(UsersRepository $usersRepository) {
+    $this->usersRepository = $usersRepository;  // LoginService hat jetzt Zugriff auf DB
+  }
+
+  public function check() {
+    //var_dump($_SESSION);
+    if (isset($_SESSION['login'])) {
+      //die();
+      return true;
+    } else {
+        header("Location: login");
+        //die();  // hier könnte auch eine exeption ausgeführt werden
+      }
+  }
+
+  public function check_permission($page) {
+    if ((isset($_SESSION['login'])) && ($_SESSION['seite']== $page)){
+      return true;
+    } else {
+        header("Location: login");
+        //die();  // hier könnte auch eine exeption ausgeführt werden
+      }
+  }
+
+  public function attempt($username, $password)  {
+    $user = $this->usersRepository->findByUserName($username); // user aus db
+    if(empty($user)) {
+        return false;   // Nutzer nicht vorhanden
+    }
+    if (password_verify($password, $user->password )) { //echo ("Login erfolgreich!");
+        session_regenerate_id(true);
+        $_SESSION['login']= $user->username;
+        $_SESSION['rechte'] = $user->rechte;
+        $_SESSION['seite'] = $user->seite;    // seite, die der angemeldete User aufrufen darf
+        //var_dump($_SESSION); die();
+        return true;    // Login erfolgreich
+        } else {
+            return false;
+        }
+  }
+
+  public function index() {
+    unset($_SESSION['login']);
+    unset($_SESSION['seite']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function fotos() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function logout() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function portfolio() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+    //var_dump($_GET);
+    if (isset($_GET['carussel'])) {
+      if ($_GET['carussel']== "01"){
+        $_SESSION['carussel'] = "01";
+      } else {$_SESSION['carussel'] = "00";}}
+    //die();
+  }
+
+  public function carussel() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function ostfriesland() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function rheinruhr() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function nordpark() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function natur() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function bonsai() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function auswahl() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function familie() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function grid() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function test() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function australien() {
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function st() {
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function se() {
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function about() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+  public function impressum() {
+    unset($_SESSION['login']);
+    session_regenerate_id(true);      // nicht zwingend aber schadet nicht
+  }
+
+}
+?>
--- a/foto/src/User/UserModel.php
+++ b/foto/src/User/UserModel.php
@ -0,0 +1,22 @@
+<?php
+
+namespace App\User;
+
+use App\Core\AbstractModel;
+
+  class UserModel extends AbstractModel
+  {
+
+    public $id;
+    public $username;
+    public $email;
+    public $seite;
+    public $password;
+
+  }
+
+// nachstehende functions bedienen das ArrayAccess
+// damit können in post.php Zugriffe auf ein Array aus
+// der DB getätigt werden
+
+ ?>
--- a/foto/src/User/UsersRepository.php
+++ b/foto/src/User/UsersRepository.php
@ -0,0 +1,30 @@
+<?php
+namespace App\User;
+use App\Core\AbstractRepository;
+use PDO;
+
+class UsersRepository extends AbstractRepository {
+// abstract functions aus dem AbstractRepositery müssen hier definiert werden!
+  public function getTableName() {
+    return "foto_user";
+  }
+
+  public function getModelName() {
+    return "App\\User\\UserModel";
+  }
+// nachstehende function findet den username und gibt array des users zurück
+  public function findByUserName($username)  {
+      $table = $this->getTableName();
+      $model = $this->getModelName();
+
+      //echo $table."</br>"; echo $username;
+
+      $stmt = $this->pdo->prepare("SELECT * FROM `$table` WHERE username = :username");
+      $stmt->execute(['username' => $username]);
+      $stmt->setFetchMode(PDO::FETCH_CLASS, $model);
+      $user = $stmt->fetch(PDO::FETCH_CLASS);
+      //var_dump ($user); die();
+      return $user;
+    }
+  }
+?>
--- a/foto/views/css/foto_nav.css
+++ b/foto/views/css/foto_nav.css
@ -0,0 +1,66 @@
+<style>
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  
+}
+
+.navbar {
+  overflow: hidden;
+  background-color: #333;
+}
+
+.navbar a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdown {
+  float: left;
+  overflow: hidden;
+}
+
+.dropdown .dropbtn {
+  font-size: 16px;
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a:hover, .dropdown:hover .dropbtn {
+  background-color: red;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+</style>
--- a/foto/views/css/gallery.css
+++ b/foto/views/css/gallery.css
@ -0,0 +1,143 @@
+<style type="text/css">
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        background-color: #f1f1f1;
+/*        padding: 20px;  */
+        font-family: Arial;
+    }
+
+    h1 {
+        font-size: 30px;
+        word-break: break-all;
+      }
+
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+/* Center website */
+    .main1 {
+/*        max-width: 1000px; */
+        margin: auto;
+    }
+
+/* fixiert den Text oben rechts   */
+    .fixed {
+        position: fixed;
+        bottom: 0;
+        top: 0px;
+        right: 0px;
+/*        width: 340px; */
+        background-color: transparent;
+        font-size: 12px;
+  }
+
+    .row {
+        margin: 0px;  /*5px -11px;    /* 10px; -16px; */
+    }
+
+/* Add padding BETWEEN each column */
+    .row,
+    .row > .column {
+        padding: 2px 2px 2px 2px;
+    }
+
+/* Create three equal columns that floats next to each other */
+    .column {
+        float: left;
+        text-align: center;
+        width: 33.33%;
+        display: none; /* Hide all elements by default */
+    }
+
+/* Clear floats after rows */
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+/* Content */
+    .content {
+        background-color: white;
+        padding: 2px;               /* weisser Bild-Rand 10px; */
+    }
+
+/* The "show" class is added to the filtered elements */
+    .show {
+      display: block;
+    }
+
+    /* Style the buttons */
+    .btn {
+      border: none;
+      outline: none;
+      padding: 12px 16px;
+      background-color: #f1f1f1;  /*white; */
+      cursor: pointer;
+    }
+    .btn.btn-primary {
+      color: #fff;
+      background-color: #ddd; /*#337ab7;*/
+      border-color: #2e6da4;
+    }
+
+    .btn:hover {
+      background-color: #ddd;
+      color: #fff;
+    }
+
+    .btn.active {
+      background-color: #666;
+      color: white;
+    }
+
+/* Style the gallery */
+    .gallery {
+      margin:0 auto;
+      display:table;
+      width:100%          /* volle Bildbreite statt 90%  */
+      }
+    .gallery p {
+      display:table-cell;
+  /*    width:0%;          /*20%;*/
+      padding:0%;         /*10px;*/
+      background-color:#eee;
+/*    box-shadow:3px 3px 3px 1px #eee inset,-3px -3px 3px 1px grey inset;border-radius:20px */
+      }
+    .gallery a {
+      outline:none;
+      text-decoration:none;
+      display:block;
+      width:100%;
+      padding-bottom:100%;        /* */
+      background-color:#ccc;      /*#aaa;#ccc;*/
+      border:1px solid #777;
+      }
+    .gallery a,.gallery span {
+      background-size:contain;	/*Resize the background image to make sure the image is fully visible*/
+      contain:content;
+      background-repeat:no-repeat;
+      background-position:center;
+      }
+    .gallery a {
+      cursor:pointer;
+      }
+
+    .gallery span {
+      position:fixed;
+      left:0;
+      top:0;
+      right:0;
+      bottom:0;
+      display:none;
+      background-color:rgba(20,20,20,1);
+      }
+    .gallery a:focus + span {
+      display:block;z-index:200
+      }
+</style>
--- a/foto/views/css/gallery_1.css
+++ b/foto/views/css/gallery_1.css
@ -0,0 +1,144 @@
+<style type="text/css">
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        background-color: #f1f1f1;
+/*        padding: 20px;  */
+        font-family: Arial;
+    }
+
+    h1 {
+        font-size: 30px;
+        word-break: break-all;
+      }
+
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+/* Center website */
+    .main1 {
+/*        max-width: 1000px; */
+        margin: auto;
+    }
+
+/* fixiert den Text oben rechts   */
+    .fixed {
+        position: fixed;
+        bottom: 0;
+        top: 0px;
+        right: 0px;
+/*        width: 340px; */
+        background-color: transparent;
+        font-size: 12px;
+  }
+
+    .row {
+        margin: 0px;  /*5px -11px;    /* 10px; -16px; */
+    }
+
+/* Add padding BETWEEN each column */
+    .row,
+    .row > .column {
+        padding: 2px 2px 2px 2px;
+    }
+
+/* Create three equal columns that floats next to each other */
+    .column {
+        float: left;
+        text-align: center;
+        width: 33.33%;
+        display: none; /* Hide all elements by default */
+    }
+
+/* Clear floats after rows */
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+/* Content */
+    .content {
+        background-color: white;
+        padding: 2px;               /* weisser Bild-Rand 10px; */
+    }
+
+/* The "show" class is added to the filtered elements */
+    .show {
+      display: block;
+    }
+
+    /* Style the buttons */
+    .btn {
+      border: none;
+      outline: none;
+      padding: 12px 16px;
+      background-color: white;
+      cursor: pointer;
+    }
+    .btn.btn-primary {
+      color: #fff;
+      background-color: #ddd; /*#337ab7;*/
+      border-color: #2e6da4;
+    }
+
+    .btn:hover {
+      background-color: #ddd;
+
+    }
+
+    .btn.active {
+      background-color: #666;
+      
+      color: white;
+    }
+
+/* Style the gallery */
+    .gallery {
+      margin:0 auto;
+      display:table;
+      width:100%          /* volle Bildbreite statt 90%  */
+      }
+    .gallery p {
+      display:table-cell;
+  /*    width:0%;          /*20%;*/
+      padding:0%;         /*10px;*/
+      background-color:#eee;
+/*    box-shadow:3px 3px 3px 1px #eee inset,-3px -3px 3px 1px grey inset;border-radius:20px */
+      }
+    .gallery a {
+      outline:none;
+      text-decoration:none;
+      display:block;
+      width:100%;
+      padding-bottom:100%;        /* */
+      background-color:#ccc;      /*#aaa;#ccc;*/
+      border:1px solid #777;
+      }
+    .gallery a,.gallery span {
+      background-size:contain;	/*Resize the background image to make sure the image is fully visible*/
+      contain:content;
+      background-repeat:no-repeat;
+      background-position:center;
+      }
+    .gallery a {
+      cursor:pointer;
+      }
+
+    .gallery span {
+      position:fixed;
+      left:0;
+      top:0;
+      right:0;
+      bottom:0;
+      display:none;
+      background-color:rgba(20,20,20,1);
+      }
+    .gallery a:focus + span {
+      display:block;z-index:200
+      }
+</style>
--- a/foto/views/css/gallery_vorschau.css
+++ b/foto/views/css/gallery_vorschau.css
@ -0,0 +1,97 @@
+<style>
+body {
+  font-family: Arial;
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+img {
+  vertical-align: middle;
+}
+
+/* Position the image container (needed to position the left and right arrows) */
+.container {
+  position: relative;
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+}
+
+/* Add a pointer when hovering over the thumbnail images */
+.cursor {
+  cursor: pointer;
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 40%;
+  width: auto;
+  padding: 16px;
+  margin-top: -50px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* Container for image text */
+.caption-container {
+  text-align: center;
+  background-color: #222;
+  padding: 2px 16px;
+  color: white;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Six columns side by side */
+.column {
+  float: left;
+  width: 16.66%;
+}
+
+/* Add a transparency effect for thumnbail images */
+.demo {
+  opacity: 0.6;
+}
+
+.active,
+.demo:hover {
+  opacity: 1;
+}
+</style>
--- a/foto/views/css/image_grid.css
+++ b/foto/views/css/image_grid.css
@ -0,0 +1,55 @@
+
+<style>
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.header {
+    text-align: center;
+/*    padding: 12px;  */
+}
+
+.row {
+    display: -ms-flexbox; /* IE 10 */
+    display: flex;
+    -ms-flex-wrap: wrap; /* IE 10 */
+    flex-wrap: wrap;
+    padding: 0 4px;
+}
+
+/* Create two equal columns that sits next to each other */
+.column {
+    -ms-flex: 50%; /* IE 10 */
+    flex: 50%;
+    padding: 0 4px;
+}
+
+.column img {
+    margin-top: 8px;
+    vertical-align: middle;
+}
+
+/* Style the buttons */
+.btn {
+    border: none;
+    outline: none;
+    padding: 10px 16px;
+    background-color: #f1f1f1;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.btn:hover {
+    background-color: #ddd;
+}
+
+.btn.active {
+    background-color: #666;
+    color: white;
+}
+</style>
--- a/foto/views/css/navi.css
+++ b/foto/views/css/navi.css
@ -0,0 +1,68 @@
+<style>
+
+#navbar-brand #currentpage a {
+background-color: black;
+color: white;
+font-weight: bold;
+}
+
+#navbar #currentpage a {
+background-color: black;
+color: white;
+font-weight: bold;
+}
+
+.catcher {
+  position: relative;
+  text-align: center;
+  color: white;
+}
+
+.bottom-left {
+  position: absolute;
+  bottom: 20px;
+  left: 16px;
+  color: white;
+}
+
+.top-left {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  color: white;
+}
+
+.top-right {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  color: white;
+}
+
+.bottom-right {
+  position: absolute;
+  bottom: 8px;
+  right: 16px;
+  color: white;
+}
+
+.bottom-centered {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.active {
+/*    background-color: #4CAF50; */
+  background-color: black;
+  font-weight: bold;
+}
+</style>
--- a/foto/views/css/style.css
+++ b/foto/views/css/style.css
@ -0,0 +1,78 @@
+.navbar {
+	margin-bottom: 0px;
+}
+
+.navbar-inverse .navbar-brand {
+	font-size: 2em;
+	color: #fff;
+}
+
+.navbar-inverse .navbar-brand:hover {
+	color: #ccc;
+}
+
+.navbar-brand .logo {
+	color: #5cb85c;
+}
+
+.main-container {
+	margin-top: 20px;
+}
+
+.registration-form {
+	max-width: 450px;
+	margin: 0 auto;
+}
+
+.small-container-500 {
+	max-width: 500px;
+  	padding: 15px;
+  	margin: 0 auto;
+}
+
+.small-container-330 {
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+
+
+.small-container .small-container-heading,
+.small-container .checkbox {
+  margin-bottom: 10px;
+}
+.small-container .checkbox {
+  font-weight: normal;
+}
+.small-container .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+}
+.small-container .form-control:focus {
+  z-index: 2;
+}
+
+/* Signin */
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.login td {
+    padding-right: 2px;
+    padding-left: 2px;
+}
+
+.login {
+	color: #fff;
+}
--- a/foto/views/fotos/about.php
+++ b/foto/views/fotos/about.php
@ -0,0 +1,90 @@
+<?php
+  $thisPage="about";
+//  include __DIR__ . "/../layout/header_fotos.php";
+  include __DIR__ . "/../inc/foto_nav.php";
+  include __DIR__ . "/../css/navi.css";
+
+  $base_ordner = "/home/foto/views/";
+  $_SESSION['carusssel'] = "00";
+?>
+
+<div id="wechselbild">
+  <img src="<?php echo $base_ordner."imgEyeC/DSC_0008.jpg"?> alt="Eye catcher" style="width:100%; margin-top:50px">
+</div>
+
+<div class="text-center">
+  <font size="6" color="grey">Über mich - Persönliches</font>
+</div>
+
+ <div class="container">
+   <div class="starter-template">
+    <div class ="main" id="#inhalt" style="float:none; margin-left:15px; margin-right:10px;">
+
+      <h3>Wer bin ich</h3>
+            <?php echo"<img src=".$base_ordner."imgLogo/ich.jpg"?>  alt="... das bin ich" style="float:right; margin:20px;">
+            <p>Ich heiße Harald und bin Jahrgang 1949. Aufgewachsen bin ich in einem kleinen Dorf in Ostfriesland.
+            Nach meiner Schulzeit folgte eine Ausbildung zum Elektromechaniker und Elektroniker,
+            eine gute Vorraussetzung für das anschließende Studium der Nachrichtentechnik / Informatik.</p>
+
+            <p>Meine erste Arbeitsstelle führte mich ins Ruhrgebiet nach Duisburg, wo ich auch heute noch wohne.
+            Zunächst arbeitete ich als Entwicklungsingenieur; später erweiterte sich mein Verantwortungsbereich
+            in verschiedenen Unternehmen. Bis zu meiner Pensionierung habe ich verschiedene Managementaufgaben
+            in verantwortlicher Position wahrgenommen - heute arbeite ich noch gelegentlich als Consultant/Berater.</p>
+
+            <p>Ich lebe gerne im Ruhrgebiet, bin aber meiner Heimat Ostfriesland noch immer sehr verbunden.</p>
+
+        <hr>
+        <h3>Meine Hobbies</h3>
+
+        <h4>Fotografie </h4>
+        <p>Mein Interesse an der Fotografie begann in meinen Kindertagen,
+            ein Onkel von mir besaß als einziger in der Familie eine Kamera.
+            Seine Bilder waren begehrt - meine Neugier war geweckt.</p>
+        <p>Meine ersten eigenen Fotos habe ich mit einer geschenkten einfachen Rollfilmkamera gemacht. Von den
+          Geldgeschenken zu meiner Konfirmation konnte ich dann endlich meine erste Spiegelreflex-Kamera kaufen -
+          eine Yashika mit drei Wechselobjektiven.</p>
+        <p>Ein paar Jahre später habe ich alles verkauft und meine erste Nikon gekauft - eine 801S.
+            Weitere analoge Nikon Kameras folgten: F3 - F4 - F5.</p>
+        <p>Der Einstieg in die digitale Welt began mit einer Nikon D200 - danach folgte die D300
+            und dann endlich die erste Vollformat, eine D3 - meine aktuelle Kamera ist eine D4s.</p>
+        <p>Parallel zu den Kameras habe ich die Anzahl und Qualität meiner Objektive stetig erweitert,
+            so dass ich heute über professionelles Equipment verfüge.</p>
+        <p>Meiner frühen Leidenschaft ist zu verdanken, dass es überhaupt Fotos von meinen Großeltern und
+           vielen anderen Personen aus meinem Umfeld gibt.<br></p>
+        <hr>
+        <h4>Möbelbau</h4>
+        <p>In einem zweiten Hobby beschäftige ich mich mit der Bearbeitung von Holz. In einer kleinen,
+            gut ausgestatteten Werkstatt, baue ich unter anderem Möbel sowie Gebrauchsgegenstände aus Holz.
+           Dieses Hobby pflege ich vornehmlich in der kalten Jahreszeit.</p>
+        <p>Gleichgesinnte können gern Kontakt zu mir aufnehmen - eine kleine Fachsimpelei ist immer willkommen.</p>
+        <hr>
+        <h4>Bonsai Bäume</h4>
+        <p>Nachdem ich vor vielen Jahren den ersten Bonsai gesehen habe, wollte ich unbedingt mehr
+            über die kleinen Bäume erfahren und habe mich eingelesen. Zum Gebutstag bekam ich meinen ersten Bonsai geschenkt,
+            das ist jetzt 40 Jahre her. Leider hat der Baum den ersten Winter nicht überlebt - also war weiteres Wissen notwendig!</p>
+        <p>Nach einem Bonsai-Gestaltungskurs bin ich dann wieder mehr in das Thema Bonsai eingetaucht - inzwischen
+           besitze ich ca. 20 Exemplare, die alle von mir selber gezogen wurden.
+            Der Älteste ist inzwischen über dreißig Jahre alt. Im Portfolio werde ich die Bäume noch einzeln vorstellen.</p>
+        <hr>
+        <h4>Mein Garten</h4>
+        <p>Als weiteres Hobby pflege ich einen großen Garten, der überwiegend sehr pflegeleicht angelegt ist.
+          Damit steht das Relaxen in der warmen Jahreszeit im Vordergrund. Die zuvor erwähnten Bonsais
+            sind in einem separaten Bereich angeordnet und sind ein besonderer Blickfang. Natürlich steht der Garten in Verbindung
+          mit der Fotografie - es gibt dort viele tolle Motive.</p>
+        <hr>
+        <h4>Mein Stammbaum</h4>
+        <p>Als jüngstes Hobby beschäftige ich mit meiner Familie und deren Herkunft. Während der letzten Jahre habe ich
+          allerlei Daten zu einzelnen Personen notiert, die jetzt in einer entsprechneden SQL-Datenbank
+          gespeichert wurden. Die Darstellung der verschiedenen Sichten erfolgt auf eigens dafür entwickelten Seiten.
+          Dieser Bereich ist privat, kann aber mit entsprechnder Kennung und Passwort eingesehen werden - sprechen Sie mich an.
+        </p>
+
+      </div>
+   </div>
+</div>
+
+
+<?php
+  include __DIR__ . "/../js/bildwechsel.inc.js";
+  include __DIR__ . "/../layout/footer.php";
+?>
--- a/foto/views/fotos/australien.php
+++ b/foto/views/fotos/australien.php
@ -0,0 +1,67 @@
+
+<?php
+  $thisPage="privat";
+  $thistitel = " - Australien";
+  $_SESSION['thema'] = "australien";
+?>
+
+<?php
+  $thema = "australien";
+//  $unter_thema = array("gebäude", "sydney", "wahrzeichen");
+  $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",
+  // Singapore
+  "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", "");
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/auswahl.php
+++ b/foto/views/fotos/auswahl.php
@ -0,0 +1,37 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Auswahl";
+  $_SESSION['thema'] = "auswahl";
+?>
+
+<?php
+  $thema = $_SESSION['thema'];
+//  $unter_thema = array("auswahl", "kurioses" );
+  $titel = array("",
+    "Leere Flaschen", "Berliner Kindl", "Alte Dachziegel", "Bauwagen", "Strassenschild",
+    "Duisburger Küppersmühle", "Stangenmaterial",  "Wasserversorgung",
+    "Angus Rinder", "Fensterdekoration", "Hecke im Herbst",
+    "Bäume im Herbst", "Olympiapark Berlin", "Kaktus",
+    "Zapfsäule", "Leiter in Farbe", "Rolltreppe",
+    "Fahrrad aus dem Fluß", "vergessene Leiter", "Pflanze im Wattenmeer",
+    "Entwässerungsgraben", "Begrenzung", "Blumen","Jungvieh am Deich", "Windpark",
+    "Steinflechte","Bronzefigur am Wegrand","Bronzefigur",
+    "in Leer","in Leer","Wirtschaftsweg mit Windloopers",
+    "Heuballen","");
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/bonsai.php
+++ b/foto/views/fotos/bonsai.php
@ -0,0 +1,29 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Bonsai";
+  $_SESSION['thema'] = "bonsai";
+?>
+
+<?php
+  $thema = $_SESSION['thema']; // Bonsai
+//  $unter_thema = array("bonsai");
+  $titel = array("", "Apfelbaum mit Früchten", "Bosaigarten", "Apfelbaum blüht",
+                 "Blütenpracht", "Buche", "Äpfel sind reif",
+                 "Apfelbaum",  "Winterzeit", "" );
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/carussel.php
+++ b/foto/views/fotos/carussel.php
@ -0,0 +1,32 @@
+
+<?php
+  $thisPage="carussel";
+  $thistitel = " - Carussel";
+  $_SESSION['thema'] = "carussel";
+?>
+
+<?php
+  $thema = $_SESSION['thema']; // Bonsai
+//  $unter_thema = array("bilder");
+  $titel = array("", "Am Keller","Windrad", "Kranauslager bei Nacht", "Einstellventile", "Kühlanlage", "Hochofenbefüllung",
+                 "Kranauslager über Klärbecken", "Absperrventil", "Absperrventile",
+                 "Absperrventile", "Rost am Rohr","Windkühler", "Hochofenbefüllung", "Stille Orte", "Gasverteiler",
+                 "Gasleitung",
+                 "Kran bei Nacht", "Absperrventil Gasleitung",  "Reinigungsventil", "Windkükler",
+                 "Roheisenwagen", "Pflanze", "kaputte Lampe", "Natur holt sich zurück","Absperrventil", "Dampfauslass","");
+
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+    //include __DIR__ . "/../inc/foto_carussel_vorschau.inc.php"; // mit vorschau
+
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/familie.php
+++ b/foto/views/fotos/familie.php
@ -0,0 +1,28 @@
+
+<?php
+  $thisPage="privat";
+  $thistitel = " - Familie";
+  $_SESSION['thema'] = "familie";
+?>
+
+  <?php
+  $thema = $_SESSION['thema']; //"familie;
+//  $unter_thema = array("portrait", "gruppe", "ella");
+  $titel = array("", "Harald", "Vater", "2015 - 92.Geburtstag", "Ella", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "");
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/fotos.php
+++ b/foto/views/fotos/fotos.php
@ -0,0 +1,53 @@
+<?php
+  $thisPage="fotos";
+  include __DIR__ . "/../layout/header_fotos.php";
+//  include __DIR__ . "/../inc/foto_nav.php";
+  include __DIR__ . "/../css/navi.css";
+  unset($_SESSION['user_name']);
+  $_SESSION['carusssel'] = "00";
+
+  $str_path = str_replace('http://localhost',"",'http://localhost/home/foto/views/imgEyeC/DSC_0008.jpg');
+  //$str_path = /home/foto/views/layout/imgEyeC/DSC_0008.jpg
+?>
+
+  <div id="wechselbild">
+    <img src= "<?php echo $str_path; ?>" alt="Eye catcher" style="width:100%; margin-top:50px">
+  </div>
+
+  <div class="text-center">
+    <font size="6" color="grey">Fotografie und mehr ...</font>
+  </div>
+
+  <div class="container">
+    <div class="starter-template">
+      <div class ="main" id="#inhalt" style="float:none; margin-left:15px; margin-right:10px;">
+        <br>
+        <p>Die Idee zu dieser Foto-Homepage ist mir gekommen, als mich immer wieder Leute fragten,
+           wann und wo sie denn mal Bilder von mir sehen könnten.
+           Außerdem hat es mich gereizt, eine eigene Foto-Homepage zu erstellen -
+           also habe ich mich mit den Werkzeugen vertraut gemacht, einen PHP-Kurs absolviert und
+           erste Entwürfe gestartet. Noch ist nicht alles komplett fertig,
+           aber erste Seiten sind erstellt.<br></p>
+        <p>Auf der Seite <a href="about" title="About me">About me </a> erfahren Sie
+           etwas persönliches über mich, unter anderem wie ich zum Fotografieren gekommen bin.
+           Dort stelle ich auch meine heutige <a href="ausruestung.php" title="Ausrüstung">Ausrüstung</a> vor.
+           Außerdem finden Sie hier ein Formular zur Kontaktaufnahme vor - dieses Formular ist momentan deaktiviert,
+           weil von meine Seite gehackt wurde und Spam E-Mails versendet wurden.</p>
+        <p>Im <a href="portfolio" title="Portfolio">Portfolio </a>erhalten Sie einen Überblick zu verschiedenen Themen
+           und ausgesuchten Fotos. Eine Auswahl der besten Fotos finden Sie unter
+           <a href="auswahl" title="auswahl">Auswahl </a>.
+           </p>
+        <p>Meiner ursprünglichen Heimat <a href="ostfriesland">Ostfriesland </a> und dem
+           <a href="rheinruhr">Rhein / Ruhrgebiet</a> habe ich jeweils eine Seite gewidmet.
+           Hier erwarten Sie Landschaftsbilder und Impressionen aus Ostfriesland und Fotos zur Industriegeschichte aus dem Rhein/Ruhrgebiet.</p>
+        <p><br/>Genießen Sie die Zeit während des virtuellen Spaziergangs.</p>
+        <p>Viel Vergnügen dabei wünscht Ihnen <br/><br/>Harald Börgmann </p>
+        <p><br/></p>
+      </div>	<!-- main -->
+    </div>
+  </div>
+
+  <?php
+    include __DIR__ . "/../js/bildwechsel.inc.js";
+    include __DIR__ . "/../layout/footer.php";
+  ?>
--- a/foto/views/fotos/grid.php
+++ b/foto/views/fotos/grid.php
@ -0,0 +1,30 @@
+
+<?php
+  $thisPage="grid";
+  $thistitel = " - Auswahl";
+  $_SESSION['thema'] = "Image Grid";
+?>
+
+<?php
+
+  $thema = $_SESSION['thema'];   //"ostfriesland";
+
+  $thema = $_SESSION['thema'];   //"ostfriesland";
+//  $unter_thema = array("landschaft", "nordsee", "ewiges_Meer", "greetsiel", "dornum");
+
+  $titel = array("",  "",  "",  "",  "",  "",  "",  "",  "", "",
+                 "",  "",  "",  "",  "",  "",  "",  "",  "", "",
+                 "",  "",  "",  "",  "",  "",  "",  "",  "", "" );
+
+
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];
+  }
+
+  if (!isset($_SESSION['carussel'])){
+     $_SESSION['carussel'] = "00";
+  }
+
+  include __DIR__ . "/../inc/foto_grid.inc.php";
+
+  ?>
--- a/foto/views/fotos/grid_org.php
+++ b/foto/views/fotos/grid_org.php
@ -0,0 +1,116 @@
+
+<?php
+  $thisPage="grid";
+  $thistitel = " - Auswahl";
+  $_SESSION['thema'] = "Image Grid";
+?>
+
+<?php
+  include __DIR__ . "/../layout/header_drop.php";
+  include __DIR__ . "/../inc/foto_nav.php";
+//  include __DIR__ . "/../css/navi.css";
+
+  include __DIR__ . "/../css/image_grid.css";
+//  include __DIR__ . "/../css/gallery.css";
+
+  $thema = $_SESSION['thema'];   //"ostfriesland";
+
+ ?>
+<body>
+<!-- Header -->
+<div class="header" id="myHeader">
+  <h1>Image Grid</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 $path_img = "<img style=\"width:100%\"  src=\"/home/foto/views/images/grid/";
+ ?>
+<!-- Photo Grid -->
+<div class="row">
+  <div class="column"><?php
+    echo $path_img."01.jpg\">";
+    echo $path_img."02.jpg\">";
+    echo $path_img."03.jpg\">";
+    echo $path_img."04.jpg\">";
+    echo $path_img."05.jpg\">";
+    echo $path_img."06.jpg\">";
+    echo $path_img."07.jpg\">";
+    echo $path_img."08.jpg\">";?>
+  </div>
+  <div class="column"><?php
+    echo $path_img."09.jpg\">";
+    echo $path_img."10.jpg\">";
+    echo $path_img."11.jpg\">";
+    echo $path_img."12.jpg\">";
+    echo $path_img."13.jpg\">";
+    echo $path_img."14.jpg\">";
+    echo $path_img."15.jpg\">";?>
+  </div>
+  <div class="column"><?php
+    echo $path_img."16.jpg\">";
+    echo $path_img."17.jpg\">";
+    echo $path_img."18.jpg\">";
+    echo $path_img."19.jpg\">";
+    echo $path_img."20.jpg\">";
+    echo $path_img."21.jpg\">";
+    echo $path_img."22.jpg\">";
+    echo $path_img."23.jpg\">";
+    echo $path_img."24.jpg\">";?>
+  </div>
+  <div class="column"><?php
+    echo $path_img."25.jpg\">";
+    echo $path_img."26.jpg\">";
+    echo $path_img."27.jpg\">";
+    echo $path_img."28.jpg\">";
+    echo $path_img."29.jpg\">";
+    echo $path_img."30.jpg\">";
+    echo $path_img."31.jpg\">";
+    echo $path_img."32.jpg\">";?>
+  </div>
+</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%";
+    }
+  }
+
+  function two() { // Two images side by side
+    for (i = 0; i < elements.length; i++) {
+        elements[i].style.msFlex = "50%";  // IE10
+        elements[i].style.flex = "50%";
+    }
+  }
+
+  function four() { // Four images side by side
+    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";
+?>
--- a/foto/views/fotos/index.php
+++ b/foto/views/fotos/index.php
@ -0,0 +1,53 @@
+<?php
+  $thisPage="fotos";
+  include __DIR__ . "/../layout/header_fotos.php";
+  include __DIR__ . "/../inc/foto_nav.php";
+  include __DIR__ . "/../css/navi.css";
+  unset($_SESSION['user_name']);
+  $_SESSION['carussel'] == "00";
+
+  $str_path = str_replace('http://localhost',"",'http://localhost/home/foto/views/imgEyeC/DSC_0008.jpg');
+  //$str_path = /home/foto/views/layout/imgEyeC/DSC_0008.jpg
+?>
+
+  <div id="wechselbild">
+    <img src= "<?php echo $str_path; ?>" alt="Eye catcher" style="width:100%; margin-top:50px">
+  </div>
+
+  <div class="text-center">
+    <font size="6" color="grey">Fotografie und mehr ...</font>
+  </div>
+
+  <div class="container">
+    <div class="starter-template">
+      <div class ="main" id="#inhalt" style="float:none; margin-left:15px; margin-right:10px;">
+        <br>
+        <p>Die Idee zu dieser Foto-Homepage ist mir gekommen, als mich immer wieder Leute fragten,
+           wann und wo sie denn mal Bilder von mir sehen könnten.
+           Außerdem hat es mich gereizt, eine eigene Foto-Homepage zu erstellen -
+           also habe ich mich mit den Werkzeugen vertraut gemacht, einen PHP-Kurs absolviert und
+           erste Entwürfe gestartet. Noch ist nicht alles komplett fertig,
+           aber erste Seiten sind erstellt.<br></p>
+        <p>Auf der Seite <a href="about" title="About me">About me </a> erfahren Sie
+           etwas persönliches über mich, unter anderem wie ich zum Fotografieren gekommen bin.
+           Dort stelle ich auch meine heutige <a href="ausruestung.php" title="Ausrüstung">Ausrüstung</a> vor.
+           Außerdem finden Sie hier ein Formular zur Kontaktaufnahme vor - dieses Formular ist momentan deaktiviert,
+           weil von meine Seite gehackt wurde und Spam E-Mails versendet wurden.</p>
+        <p>Im <a href="portfolio" title="Portfolio">Portfolio </a>erhalten Sie einen Überblick zu verschiedenen Themen
+           und ausgesuchten Fotos. Eine Auswahl der besten Fotos finden Sie unter
+           <a href="auswahl" title="auswahl">Auswahl </a>.
+           </p>
+        <p>Meiner ursprünglichen Heimat <a href="ostfriesland">Ostfriesland </a> und dem
+           <a href="rheinruhr">Rhein / Ruhrgebiet</a> habe ich jeweils eine Seite gewidmet.
+           Hier erwarten Sie Landschaftsbilder und Impressionen aus Ostfriesland und Fotos zur Industriegeschichte aus dem Rhein/Ruhrgebiet.</p>
+        <p><br/>Genießen Sie die Zeit während des virtuellen Spaziergangs.</p>
+        <p>Viel Vergnügen dabei wünscht Ihnen <br/><br/>Harald Börgmann </p>
+        <p><br/></p>
+      </div>	<!-- main -->
+    </div>
+  </div>
+
+  <?php
+    include __DIR__ . "/../js/bildwechsel.inc.js";
+    include __DIR__ . "/../layout/footer.php";
+  ?>
--- a/foto/views/fotos/natur.php
+++ b/foto/views/fotos/natur.php
@ -0,0 +1,55 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Natur";
+  $_SESSION['thema'] = "natur";
+?>
+
+<?php
+  $thema = $_SESSION['thema'];
+//  $unter_thema = array("tiere", "garten", "baeume", "lüneburg");
+  $titel = array("", "Pilze", "Pilze", "Naturweg",
+      "Baumstumpf", "An der Regatta", "Blätter im Herbst",
+      "Blätter im Herbst", "Baumpilze", "Figur in Heidelberg",
+      "Trauerweide", "baumstumpf", "",
+      "",  "Rhododedren", "Rhododedren",
+      "Rhododedron", "Fette Henne", "",
+      "", "", "Digitalis (giftig)",
+      "Herbst in der Heide", "Herbst in der Heide", "Herbst in der Heide",
+      "Herbst in der Heide", "Weg durch die Heide", "Wald Lichtdurchflutet",
+      "Ständerwerk eines Bauernhofs", "Bauernkate", "Rhododendren",
+      "Rhododendren", "Rhododendren", "Rhododendren am Teich",
+      "Rhododendren", "Bäume", "abgestorbener Baum",
+      "Rhododendren", "abgestorbener Baum", "Rhododendren",
+      "Rhododendren", "Rhododendren", "Rhododendren",
+      "Rhododendren", "Rhododendronblüte", "Rhododendronblüte",
+      "Rhododendronblüte", "Rhododendronblüte", "RhododendronblüteRhododendronblüte",
+      "Rhododendronblüte", "Rhododendronblüte", "Spiegelung in einer Pfütze",
+      "Rhododendren", "Rhododendren", "Rhododendren",
+      "Rhododendren", "Rhododendren", "Rhododendren",
+      "Allee", "Schloss", "Rhododendren",
+
+      "Rhododendren", "Rhododendren", "Rhododendren",
+
+      "Gräser im Moorsee", "Baumstumpf", "Fliegenpilz",
+      "Natursee", "Beeren", "Beeren", "Wetterstation", "Naturzaun",
+
+      "Schwanenekopf", "tauchender Schwan", "junger Schwan",
+      "Storch", "Wolfsfell", "brütender Schwan",
+      "Sammy", "Lucky", "angreifender Schwan", "Lucky" );
+?>
+
+<?php // carussel gesetzt?
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}               // portfolio: 00
+
+  if ($_SESSION['carussel'] == "01") {             // carussel: 01
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/nordpark.php
+++ b/foto/views/fotos/nordpark.php
@ -0,0 +1,36 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Nordpark";
+  $_SESSION['thema'] = "nordpark";
+?>
+
+<?php
+  $thema = $_SESSION['thema'];
+//  $unter_thema =array("industriekultur", "sandburg");
+  $titel = array("", "Am Keller", "Impressionen", "Absperrventil", "Stadtgasversorgung", "Windrad",
+      "Kran über Reinigungsbecken", "Absperrventile", "Windkühler", "Hochofenbefüllung",
+      "Kran bei Nacht", "Absperrventil Gasleitung", "Absperrventil", "Reinigungsventil",
+      "Rost am Rohr", "Pflanze", "Gerüst", "Stille Orte", "Dampfauslass", "Absperrventile",
+      "Absperrventile", "kaputte Lampe", "Natur holt sich zurück", "Windkükler", "Gasverteiler",
+      "Gasleitung", "Roheisenwagen",
+      "Guinessbuch der Rekorde", "Blick vom Hochofen", "Blick vom Hochofen",
+      "Blick von vorne", "Details", "Details", "Details", "Details",
+      "Details", "Reparaturarbeiten", "Perspektiven",
+      "Perspektiven", "Details", "Details", "");
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/ostfriesland.php
+++ b/foto/views/fotos/ostfriesland.php
@ -0,0 +1,60 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Ostfriesland";
+  $_SESSION['thema'] = "ostfriesland";
+?>
+
+<?php
+  $thema = $_SESSION['thema'];   //"ostfriesland";
+//  $unter_thema = array("landschaft", "nordsee", "ewiges_Meer", "greetsiel", "dornum");
+  $titel = array("",
+  "Alter Baum","Rückseite","Seitenansicht", "Nebengebäude", "Zugang",
+  "Bockwindmühle", "Ackerwagen", "Bockwindmühle",
+
+  "Grasbüschel im Wasser", "Rohrkolben",
+  "Weg duchs Moor", "Moortümpel", "Moortümpel",
+  "Moorlanschaft", "Rand Moorsee", "Moorsee", "Moorlandschaft",
+
+  "Blick auf die zweite Mühle",
+  "Greetsieler Mühlen", "Altes Sieltor", "Hafenausfahrt",
+  "Kutter im Hafen", "Kutter im Hafen", "Kutter im Hafen",
+  "Sieltor geöffnet", "Kutter", "Kutter",
+  "Kutter", "Kutter", "Kutter",
+  "Kutter", "Kutter", "Alter Anker",
+  "Zwei Mühlen", "Schafe auf dem Deich", "Windmühlen erzeugen Strom",
+
+  "Blick über das Polder", "Landschaft", "Pilsumer Leuchtturm",
+  "Mühle in Leezdorf", "Weg durch die Felder", "Strohballen auf dem Acker",
+  "Rinder", "Fuder Strohballen", "Blick über die Gleise",
+  "Bahnhof Westerende", "Bahnübergang Westerende", "Windpark im Hintergrund",
+  "Windlooper", "Mühle in Norden", "Norder Mühle",
+  "Blick auf Windpark", "Rinder", "Alte Torfkarre",
+  "Pilsumer Leuchtturm", "Schafe am Deich", "Abgewrackte Mühle Westerende",
+  "Mühlenhaus Leezdorf", "Pilsumer Kirche", "Altes Gebäude",
+  "Blick aufs Land", "Alte Kate", "Windmühlen",
+  "Windmühlen", "Norder Dornkaat", "Küstenschutz bei Ebbe",
+  "Blick auf ruhige See", "Nordsee am Abend", "Pusteblume",
+  "Vor dem Deich", "Wattenmeer am Abend", "Wattenmeer am Abend",
+  "Deichbefestigung", "Küstenschutz", "Küstenschutz",
+  "Blumen auf dem Heller", "gewonnwnes Land", "angeschwemmt",
+  "einsame Blume", "Abenddämmerung", "Dornumersiel",
+  "Krabbenkutter im Hafen", "", "",
+  "" );
+?>
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];
+  }
+
+  if (!isset($_SESSION['carussel'])){
+     $_SESSION['carussel'] = "00";
+  }
+
+  if ($_SESSION['carussel'] == "01") {                  // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";  // ja
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php"; // nein
+  }
+?>
--- a/foto/views/fotos/portfolio.php
+++ b/foto/views/fotos/portfolio.php
@ -0,0 +1,79 @@
+<?php
+  $thisPage="portfolio";
+  $thistitel = "hb fotos - Portfolio";
+
+  include __DIR__ . "/../layout/header_drop.php";     // kopf
+    //include __DIR__ . "/../layout/header_fotos.php";  // Navigation ohne Drop Down
+
+  include __DIR__ . "/../inc/foto_nav.php";           // Navigation mit Drop-down
+  include __DIR__ . "/../css/navi.css";
+
+  unset($_SESSION['user_name']);
+  //solange keine Auswahl getroffen wurd, werden Einzelbilder der Druppe angezeigt
+  if (isset($_GET['carussel'])){ $_SESSION['carussel'] = $_GET['carussel'];}else {$_SESSION['carussel']="00";}
+
+  $str_path = str_replace('http://localhost',"",'http://localhost/home/foto/views/imgEyeC/DSC_0008.jpg');
+  $base_ordner = "/home/foto/views/fotos/"; ?>
+
+<!-- *************************************************************************-->
+  <div id="wechselbild" style="position:relative; top: -20px;">
+    <img src= "<?php echo $str_path; ?>" alt="Eye catcher" style="width:100%; margin-top:50px">
+  </div>
+  <h4><center>Übersicht Portfolio </center></h4>
+  <div class="row"> <h4><center>
+    <form action="portfolio" onchange="submit()">
+      <input type="radio" name="carussel" id="carussel" value="00" title="carussel" <?php
+        if ($_SESSION['carussel'] == "00") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Einzelbilder</small>
+          </label>
+      <input type="radio" name="carussel" id="carussel" value="01" onchange="submit()" <?php
+        if ($_SESSION['carussel'] == "01") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Bilderkarussel</small>
+          </label>
+      <input type="radio" name="carussel" id="carussel" value="02" onchange="submit()"<?php
+        if ($_SESSION['carussel'] == "02") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Einzelbilder</small>
+          </label>
+    </form>
+  </div>
+  <div id="portfolio" style="padding:20px;margin-top:0px; background-color:white; height:auto">
+    <div class="row"><h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="ostfriesland">Ostfriesland</a></div>
+      <div class="col-sm-2"><a href="rheinruhr">Rhein und Ruhr</a></div>
+      <div class="col-sm-2"><a href="nordpark">Nordpark</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+    <hr>
+    <div class="row"> <h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="natur">Natur</a></div>
+      <div class="col-sm-2"><a href="bonsai">Bonsai Bäume</a></div>
+      <div class="col-sm-2"><a href="auswahl">Best of</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+    <hr>
+    <div class="row"> <h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="familie">Familie</a></div>
+      <div class="col-sm-2"><a href="login">Private Fotos</a></div>
+      <div class="col-sm-2"><a href="test">Test</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+
+  <hr>
+  <p><center><?php echo  "Karussel: ".$_SESSION['carussel'];?></p>
+  <p>Alle Bilder unterliegen meinem Copyright.
+      Manche sind mit Wasserzeichen oder meiner Signatur versehen.<br>
+      Die Bilder dürfen ohne meine Erlaubnis <u>nicht</u> verwendet werden.</center></p>
+</div>
+
+<?php
+
+
+  include __DIR__ . "/../js/bildwechsel.inc.js";
+  include __DIR__ . "/../layout/footer.php";
+?>
--- a/foto/views/fotos/portfolio_1.php
+++ b/foto/views/fotos/portfolio_1.php
@ -0,0 +1,75 @@
+<?php
+  $thisPage="portfolio";
+  $thistitel = "hb fotos - Portfolio";
+  include __DIR__ . "/../layout/header_fotos.php";
+//  include __DIR__ . "/../inc/foto_nav.php";
+  include __DIR__ . "/../css/navi.css";
+  unset($_SESSION['user_name']);
+  //solange keine Auswahl getroffen wurd, werden Einzelbilder der Druppe angezeigt
+  if (isset($_GET['carussel'])){ $_SESSION['carussel'] = $_GET['carussel'];} else {$_SESSION['carussel']="00";}
+
+  $str_path = str_replace('http://localhost',"",'http://localhost/home/foto/views/imgEyeC/DSC_0008.jpg');
+  $base_ordner = "/home/foto/views/fotos/"; ?>
+
+<!-- *************************************************************************-->
+  <div id="wechselbild">
+    <img src= "<?php echo $str_path; ?>" alt="Eye catcher" style="width:100%; margin-top:50px">
+  </div>
+  <h4><center>Übersicht Portfolio </center></h4>
+  <div class="row"> <h4><center>
+    <form action="portfolio" onchange="submit()">
+      <input type="radio" name="carussel" id="carussel" value="00" title="carussel" <?php
+        if ($_SESSION['carussel'] == "00") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Einzelbilder</small>
+          </label>
+      <input type="radio" name="carussel" id="carussel" value="01" onchange="submit()" <?php
+        if ($_SESSION['carussel'] == "01") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Bilderkarussel</small>
+          </label>
+      <input type="radio" name="carussel" id="carussel" value="02" onchange="submit()"<?php
+        if ($_SESSION['carussel'] == "02") { echo "checked=checked"; } ?> />
+          <label>
+            <small>Einzelbilder</small>
+          </label>
+    </form>
+  </div>
+  <div id="portfolio" style="padding:20px;margin-top:0px; background-color:white; height:auto">
+    <div class="row"><h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="ostfriesland">Ostfriesland</a></div>
+      <div class="col-sm-2"><a href="rheinruhr">Rhein und Ruhr</a></div>
+      <div class="col-sm-2"><a href="nordpark">Nordpark</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+    <hr>
+    <div class="row"> <h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="natur">Natur</a></div>
+      <div class="col-sm-2"><a href="bonsai">Bonsai Bäume</a></div>
+      <div class="col-sm-2"><a href="auswahl">Best of</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+    <hr>
+    <div class="row"> <h4><center>
+      <div class="col-sm-3"></div>
+      <div class="col-sm-2"><a href="familie">Familie</a></div>
+      <div class="col-sm-2"><a href="login">Private Fotos</a></div>
+      <div class="col-sm-2"><a href="test">Test</a></div>
+      <div class="col-sm-3"></div></h4></center>
+    </div>
+
+  <hr>
+  <p><center><?php echo  "Karussel: ".$_SESSION['carussel'];?></p>
+  <p>Alle Bilder unterliegen meinem Copyright.
+      Manche sind mit Wasserzeichen oder meiner Signatur versehen.<br>
+      Die Bilder dürfen ohne meine Erlaubnis nicht verwendet werden.</center></p>
+</div>
+
+<?php
+
+
+  include __DIR__ . "/../js/bildwechsel.inc.js";
+  include __DIR__ . "/../layout/footer.php";
+?>
--- a/foto/views/fotos/pw_vergessen.php
+++ b/foto/views/fotos/pw_vergessen.php
@ -0,0 +1,89 @@
+<?php
+  $thisPage="portfolio";
+  include __DIR__ . "/../layout/header_fotos.php";
+//  include __DIR__ . "/../layout/header_drop.php";
+//  include __DIR__ . "/../inc/foto_nav.php";
+  include __DIR__ . "/../css/navi.css";
+?>
+
+<?php
+  echo "<br><br><br><br><br><br>"
+?>
+ <div class="container small-container-330">
+	<h2 >Passwort vergessen</h2>
+
+<?php
+//  die();
+$showForm = true;
+
+if(isset($_GET['send']) ) {
+  ini_set('error_reporting', E_ALL);
+	if(!isset($_POST['email']) || empty($_POST['email'])) {
+		$error = "<b>Bitte eine E-Mail-Adresse eintragen</b>";
+	} else {
+		$statement = $this->pdo->prepare("SELECT * FROM users WHERE email = :email");
+		$result = $statement->execute(array('email' => $_POST['email']));
+		$user = $statement->fetch();
+
+		if($user === false) {
+			$error = "<b>Kein Benutzer gefunden</b>";
+		} else {
+
+			$passwortcode = random_string();
+			$statement = $pdo->prepare("UPDATE users SET passwortcode = :passwortcode, passwortcode_time = NOW() WHERE id = :userid");
+			$result = $statement->execute(array('passwortcode' => sha1($passwortcode), 'userid' => $user['id']));
+
+      $empfaenger = $user['email'];
+      $cc = ('info@hboergmann.de');
+      $betreff = "Neues Passwort für deinen Account auf https://hboergmann.de"; //Ersetzt hier den Domain-Namen
+      $from =  ("From: Vorname Nachname <h.boergmann@t-online.de>");
+			$url_passwortcode = getSiteURL().'passwortzuruecksetzen.php?userid='.$user['id'].'&code='.$passwortcode; //Setzt hier eure richtige Domain ein
+			$text = "Test";'Hallo '.$user['vorname'].
+      ', für deinen Account auf hboergmann.de wurde nach einem neuen Passwort gefragt. Um ein neues Passwort zu vergeben,
+      rufe innerhalb der nächsten 24 Stunden die folgende Website auf: '.$url_passwortcode.'
+      Sollte dir dein Passwort wieder eingefallen sein oder hast du dies nicht angefordert, so bitte ignoriere diese E-Mail.
+      Viele Grüße, Harald Boergmann';
+
+			//echo $text;
+
+			mail($empfaenger, $betreff, $text, $from);
+//      if($cc==true){
+      mail($cc, $betreff, $text, $from);
+//      }
+
+      //echo ("<br>");
+      //echo ($empfaenger.' - '.$betreff.' - '.$from.' - '.$text.' - '. $url_passwortcode);
+
+			echo "Ein Link um dein Passwort zurückzusetzen wurde an deine E-Mail-Adresse: ".$empfaenger." gesendet.
+      *** Bitte schaue auch in deinem Spam-Ordner nach ***";
+			$showForm = false;
+		}
+	}
+}
+
+if($showForm):
+?>
+	Gib hier deine E-Mail-Adresse ein, um ein neues Passwort anzufordern.<br><br>
+
+	<?php
+	if(isset($error) && !empty($error)) {
+		echo $error;
+	}
+
+	?>
+	<form action="?send=1" method="post">
+		<label for="inputEmail">E-Mail</label>
+		<input class="form-control" placeholder="E-Mail" name="email" type="email" value="<?php echo isset($_POST['email']) ? htmlentities($_POST['email']) : ''; ?>" required>
+		<br>
+		<input  class="btn btn-lg btn-primary btn-block" type="submit" value="Neues Passwort">
+	</form>
+<?php
+endif; //Endif von if($showForm)
+?>
+
+</div> <!-- /container -->
+
+
+<?php
+  include __DIR__ . "/../layout/footer.php";
+?>
--- a/foto/views/fotos/rheinruhr.php
+++ b/foto/views/fotos/rheinruhr.php
@ -0,0 +1,69 @@
+
+<?php
+  $thisPage="portfolio";
+  $thistitel = " - Rhein_Ruhr";
+  $_SESSION['thema'] = "rhein_und_ruhr";
+?>
+
+<?php
+  $thema = $_SESSION['thema'];   //"rhein_und_ruhr";
+//  $unter_thema = array("landschaft", "duisburg", "medienhafen", "innenhafen", "zoo");
+  $titel = array("",
+            "Ruhrbrücke", "fromberger Logistik", "Am Rhein-Herne Kanal",
+            "Industrie am Kanal", "Stadrarchiv", "Stadttheater",
+            "Lebensretter", "Himmelsleiter", "Flachbrunnen",
+            "Wartehäuschen", "Skulptur", "Stadttheater", "Spruch am Stadttheater", 
+            "Spielplatz am Rheinhafen", "An der Friedrich-Ebert-Brücke", "Homberg",
+            "Thyssen Kraftwerk" , "Wahrzeichen am Rhein", "Oskar-Huber in Ruhrort",
+            "Duisburger Wahrzeichen", "Ruhrorter Pegel", "Sammelsurium",
+            "Ruhrbrücke nach Oberhausen", "Innenhafen mit 'alter' Küppersmühle", "Um Weihnachten",
+            "Himmelsleiter", "Innenhafen", "Innenhafen",
+            "Innenhafen", "Reste vom alten Innenhafen", "'Neue' Küppersmühle",
+            "Kunst am Schaltkasten", "Enten", "Ente überlegt",
+            "Bemalter Schaltkasten", "Skulptur", "Projekt 'The Curve' gescheitert",
+            "Ruine", "Skulptur vor 'Five Boats'", "Wegpflaster aus Resten",
+            "Innenhafen", "Landesarchiv", "Brücke zum Innenhafen",
+            "Entladekran", "am Landesarchiv", "Alter Einhahnpoller",
+            "Überblick", "An der Synagoge", "Überblick",
+            "Schwan vor Kulisse", "Junger Schwan", "Landesarchiv ohne Fenster", "",
+            "'alte' Küppersmühle", "Vorbereitungen für Haube", "Stahlgerüst der Haube",
+            "Five Boats", "Innenhafen bei Nacht", "Winter ade",
+
+            "Innenhafen", "Bauwagen", "Schifffahrt auf dem Rhein",
+            "Kläranlage", "Landmarke", "Ruhrbrücke",
+            "Industrielandschaft am Abend", "Ikea mitten drin", "Strohballen",
+            "Werbe-Ponny an der Wedau", "Werbe-Ponny", "Blick auf die Ruhr",
+            "Ruhr am Abend", "Neptun am Rhein",
+
+            "Düsseldorfer Medienhafen", "Bunte Bauten",
+            "Bunte Bauten", "Wir gehen die Wand hoch",
+            "Moderne Fassaden", "Medienhafen", "Buntes",
+            "Fernsehturm", "Figuren am Bau",
+
+            "Krefelder Mühle", "Mühle", "einsamer Baum", "Holzstämme",
+            "Allee", "Allee", "Rheinorange (1992) bei km 780",
+            "einzelner Baum", "einzelner Baum", "Pusteblume",
+            "Entwässerungsgraben", "Blüten im Verborgenem", "Lanz Bulldog",
+
+            "Zebras", "Marabus am Nest", "Figur",
+            "Elefant", "Wapiti Hirsch", "Chinesischer Garten",
+            "Nachwuchs", "Strauss", "Ruhende Löwen",
+            "", "Ziegen", "Ziege",
+            "Schwein", "Wolf", "Braunbär",
+            "Affe", "Giraffe" );
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/se.php
+++ b/foto/views/fotos/se.php
@ -0,0 +1,45 @@
+
+<?php
+  $thisPage="privat";
+  $thistitel = " - Hochzeit";
+  $_SESSION['thema'] = "se";
+?>
+
+<?php
+  $thema = "se";
+//  $unter_thema = array("hochzeit");
+  $titel = array("",
+    "Ella", "Ankunft", "Ella&Tante", "Ankunft", "Ankunft", "Ankunft", "Begrüßung", "Begrüßung", "Begrüßung",
+    "Warten", "Ella", "Warten", "Kommt noch wer", "Seitenrang", "Ernste Worte",
+    "Hinweise", "Vorwort", "Schmunzeln", "Hoffentlich geht das gut", "Spannung", "Entspannung",
+    "Trauung I", "Trauung II", "Trauung III", "Gäste", "Noch mehr ernste Worte", "Überblick",
+    "Jetzt ...", "Was kommt jetzt?", "Bange Minuten", "Alles gut", "Den?", "Die wird doch nicht kneifen",
+    "Jetzt gehören wir uns", "Ringe tauschen I", "Ringe tauschen II", "Noch mehr Worte",
+    "Formalien I", "Formalien II", "Formalien III", "Formalien IV", "Gesamtbild",
+    "Glückwünsche I", "Glückwünsche II", "Freue mich", "Glückwünsche III", "Ich muß telefonieren!", "Glückwünsche IV",
+    "Gut gelaufen", "Verheiratet", "Weitere Glückwünsche", "War das alles?", "Glücklich!", "Setempfang",
+    "Auf euer Wohl", "Mutter", "Ratschläge", "Schmückt Euch", "Gespräche", "Gespräche",
+    "Gespräche", "Familenfoto I", "Familenfoto II", "Familenfoto III", "Gechwister", "Trauzeugen", "Alleine",
+    "Gruppenfoto I", "Gruppenfoto II", "Freund und Fotograf", "Kußszene", "Hi", "Gespräche", "Gespräche",
+    "Freundinnen", "Ich freue mich", "Email check", "Wo bleibt das Auto", "Im Auto", "Absprache",
+    "Gläser füllen", "Begrüßung", "Erste Rede I", "Erste rede II", "Erste Rede III", "Hochzeitstorte", "Freue mich",
+    "Gläser sind gefüllt", "Ich fühl mich wohl", "Gespräche", "Schön hier", "Ring und Blume am Revers", "Ring, Zigarette und Kaffe",
+    "Gäste", "Zuhörer I", "Zuhörer II", "Wir sind im Fernseher", "Mächtige Torte", "Gespräche", "Hier bin ich",
+    "Essenszeit", "Gespräche", "Träume", "Essen I", "Essen II", "Essen III", "Warten auf Essen", "Essen", "Essen am langen Tisch",
+    "Portrait I", "Portrait II", "Essen IV", "Essen V", "Essen VI", "Essen VII", "Essen VIII", "Portrait",
+    "Vor dem Macrskope", "Weitere Glückwünsche", "Gespräche", "Lustig war es", "Portrait", "", "", "", "" );
+?>
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/st.php
+++ b/foto/views/fotos/st.php
@ -0,0 +1,48 @@
+
+<?php
+  $thisPage="privat";
+  $thistitel = " - Hochzeit";
+  $_SESSION['thema'] = "st";
+?>
+
+<?php
+  $thema = "st";
+//  $unter_thema = array("ankunft", "trauung", "fotosession", "feier", "impressionen");
+  $titel = array("",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "" );
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/test.php
+++ b/foto/views/fotos/test.php
@ -0,0 +1,28 @@
+
+<?php
+  $thisPage="privat";
+  $thistitel = " - Familie";
+  $_SESSION['thema'] = "familie";
+?>
+
+  <?php
+  $thema = $_SESSION['thema']; //"familie;
+//  $unter_thema = array("portrait", "gruppe", "ella");
+  $titel = array("", "Harald", "Vater", "2015 - 92.Geburtstag", "Ella", "", "", "", "", "",
+    "", "", "", "", "", "", "", "", "", "");
+?>
+
+<?php
+  if (isset($_GET['carussel'])) {
+    $_SESSION['carussel'] = $_GET['carussel'];}
+
+    if (!isset($_SESSION['carussel'])){
+      $_SESSION['carussel'] = "00";}
+
+  if ($_SESSION['carussel'] == "01") {             // carussel?
+    include __DIR__ . "/../inc/foto_carussel.inc.php";
+  } else {
+    $_SESSION['carussel'] = "00";
+    include __DIR__ . "/../inc/foto_portfolio.inc.php";
+  }
+?>
--- a/foto/views/fotos/test_grid.php
+++ b/foto/views/fotos/test_grid.php
@ -0,0 +1,106 @@
+
+<?php
+  $thisPage="grid";
+  $thistitel = " - Auswahl";
+  $_SESSION['thema'] = "auswahl";
+?>
+
+<?php
+  include __DIR__ . "/../layout/header_drop.php";
+  include __DIR__ . "/../inc/foto_nav.php";
+//  include __DIR__ . "/../css/navi.css";
+
+  include __DIR__ . "/../css/image_grid.css";
+//  include __DIR__ . "/../css/gallery.css";
+
+  $thema = $_SESSION['thema'];   //"ostfriesland";
+
+?>
+<body>
+<!-- Header -->
+<div class="header" id="myHeader">
+  <h1>Image Grid</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>
+
+<!-- Photo Grid -->
+<div class="row">
+  <div class="column">
+    <img src="/home/foto/views/images/grid/01.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/02.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/03.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/04.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/05.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/home/foto/views/images/grid/06.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/07.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/08.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/09.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/10.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/home/foto/views/images/grid/11.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/12.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/13.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/14.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/home/foto/views/images/grid/15.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/16.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/17.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/18.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/19.jpg" style="width:100%">
+    <img src="/home/foto/views/images/grid/20.jpg" style="width:100%">
+  </div>
+</div>
+
+
+<script>
+  // Get the elements with class="column"
+  var elements = document.getElementsByClassName("column");
+  // Declare a loop variable
+  var i;
+  // Full-width images
+  function one() {
+    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";
+?>
--- a/foto/views/fotos/test_new.php
+++ b/foto/views/fotos/test_new.php
@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+    body {
+      font-family: Arial;
+      margin: 0;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+
+    /* Position the image container (needed to position the left and right arrows) */
+    .container {
+      position: relative;
+    }
+
+    /* Hide the images by default */
+    .mySlides {
+      display: none;
+    }
+
+    /* Add a pointer when hovering over the thumbnail images */
+    .cursor {
+      cursor: pointer;
+    }
+
+    /* Next & previous buttons */
+    .prev,
+    .next {
+      cursor: pointer;
+      position: absolute;
+      top: 40%;
+      width: auto;
+      padding: 16px;
+      margin-top: -50px;
+      color: white;
+      font-weight: bold;
+      font-size: 20px;
+      border-radius: 0 3px 3px 0;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    /* Position the "next button" to the right */
+    .next {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    /* On hover, add a black background color with a little bit see-through */
+    .prev:hover,
+    .next:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    /* Number text (1/3 etc) */
+    .numbertext {
+      color: #f2f2f2;
+      font-size: 12px;
+      padding: 8px 12px;
+      position: absolute;
+      top: 0;
+    }
+
+    /* Container for image text */
+    .caption-container {
+      text-align: center;
+      background-color: #222;
+      padding: 2px 16px;
+      color: white;
+    }
+
+    .row:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+
+    /* Six columns side by side */
+    .column {
+      float: left;
+      width: 16.66%;
+    }
+
+    /* Add a transparency effect for thumnbail images */
+    .demo {
+      opacity: 0.6;
+    }
+
+    .active,
+    .demo:hover {
+      opacity: 1;
+    }
+    </style>
+  <body>
+    <?php
+    echo $thema = "/test/portrait";
+    echo "</br>";
+    echo $files = __DIR__ . "/../images/test/portrait/";
+    echo "</br>";
+    $allebilder = scandir($files);
+
+    var_dump($allebilder);
+    echo $allebilder['3'];?>
+    <img class="demo cursor" src="<?php echo $files.$allebilder['3'];?>" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
+    <img src="http://localhost/Applications/XAMPP/xamppfiles/htdocs/home/foto/views/images/test/portrait/DSC_1119.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
+
+  <h2 style="text-align:center">Slideshow Gallery</h2>
+
+
+  <div class="container">
+    <div class="mySlides">
+      <div class="numbertext">1 / 6</div>
+      <img src="<?php echo $files.$allebilder['3'];?>" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">2 / 6</div>
+      <img src="img_5terre_wide.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">3 / 6</div>
+      <img src="img_mountains_wide.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">4 / 6</div>
+      <img src="img_lights_wide.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">5 / 6</div>
+      <img src="img_nature_wide.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">6 / 6</div>
+      <img src="img_snow_wide.jpg" style="width:100%">
+    </div>
+
+    <a class="prev" onclick="plusSlides(-1)">❮</a>
+    <a class="next" onclick="plusSlides(1)">❯</a>
+
+    <div class="caption-container">
+      <p id="caption"></p>
+    </div>
+
+
+
+    <div class="row">
+      <div class="column">
+        <img class="demo cursor" src="<?php echo $files.$allebilder['3'];?>" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
+      </div>
+      <div class="column">
+        <img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
+      </div>
+      <div class="column">
+        <img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
+      </div>
+      <div class="column">
+        <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
+      </div>
+      <div class="column">
+        <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
+      </div>
+      <div class="column">
+        <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let slideIndex = 1;
+    showSlides(slideIndex);
+
+    function plusSlides(n) {
+      showSlides(slideIndex += n);
+    }
+
+    function currentSlide(n) {
+      showSlides(slideIndex = n);
+    }
+
+    function showSlides(n) {
+      let i;
+      let slides = document.getElementsByClassName("mySlides");
+      let dots = document.getElementsByClassName("demo");
+      let captionText = document.getElementById("caption");
+      if (n > slides.length) {slideIndex = 1}
+      if (n < 1) {slideIndex = slides.length}
+      for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+      }
+      for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+      }
+      slides[slideIndex-1].style.display = "block";
+      dots[slideIndex-1].className += " active";
+      captionText.innerHTML = dots[slideIndex-1].alt;
+    }
+  </script>
+
+  </body>
+</html>
--- a/foto/views/images/australien/1_hotel/01_hinflug_1.jpg
+++ b/foto/views/images/australien/1_hotel/01_hinflug_1.jpg
--- a/foto/views/images/australien/1_hotel/02_hinflug.jpg
+++ b/foto/views/images/australien/1_hotel/02_hinflug.jpg
--- a/foto/views/images/australien/1_hotel/03_speisesaal_1.jpg
+++ b/foto/views/images/australien/1_hotel/03_speisesaal_1.jpg
--- a/foto/views/images/australien/1_hotel/04_drea_tanzt.jpg
+++ b/foto/views/images/australien/1_hotel/04_drea_tanzt.jpg
--- a/foto/views/images/australien/1_hotel/05_drea_tanzt.jpg
+++ b/foto/views/images/australien/1_hotel/05_drea_tanzt.jpg
--- a/foto/views/images/australien/1_hotel/06_Drea_tanzt.jpg
+++ b/foto/views/images/australien/1_hotel/06_Drea_tanzt.jpg
--- a/foto/views/images/australien/1_hotel/07_drea_in_schlucht.jpg
+++ b/foto/views/images/australien/1_hotel/07_drea_in_schlucht.jpg
--- a/foto/views/images/australien/2_sydney/01_abend_am_meeer.jpg
+++ b/foto/views/images/australien/2_sydney/01_abend_am_meeer.jpg
--- a/foto/views/images/australien/2_sydney/02_am_meer.jpg
+++ b/foto/views/images/australien/2_sydney/02_am_meer.jpg
--- a/foto/views/images/australien/2_sydney/03_drea_entsteigt_Meer.jpg
+++ b/foto/views/images/australien/2_sydney/03_drea_entsteigt_Meer.jpg
--- a/foto/views/images/australien/2_sydney/04_am_abend.jpg
+++ b/foto/views/images/australien/2_sydney/04_am_abend.jpg
--- a/foto/views/images/australien/2_sydney/05_skyline.jpg
+++ b/foto/views/images/australien/2_sydney/05_skyline.jpg
--- a/foto/views/images/australien/2_sydney/06_skyline.jpg
+++ b/foto/views/images/australien/2_sydney/06_skyline.jpg
--- a/foto/views/images/australien/2_sydney/07_skyline.jpg
+++ b/foto/views/images/australien/2_sydney/07_skyline.jpg
--- a/foto/views/images/australien/2_sydney/08_drea_am_Wasser.jpg
+++ b/foto/views/images/australien/2_sydney/08_drea_am_Wasser.jpg
--- a/foto/views/images/australien/2_sydney/09_drea_vor_Brücke_1.jpg
+++ b/foto/views/images/australien/2_sydney/09_drea_vor_Brücke_1.jpg
--- a/foto/views/images/australien/2_sydney/10_drea_vor_oper.jpg
+++ b/foto/views/images/australien/2_sydney/10_drea_vor_oper.jpg
--- a/foto/views/images/australien/2_sydney/11_skuriles.jpg
+++ b/foto/views/images/australien/2_sydney/11_skuriles.jpg
--- a/foto/views/images/australien/2_sydney/12_skuriles.jpg
+++ b/foto/views/images/australien/2_sydney/12_skuriles.jpg
--- a/foto/views/images/australien/2_sydney/13_skuriles.jpg
+++ b/foto/views/images/australien/2_sydney/13_skuriles.jpg
--- a/foto/views/images/australien/3_buildings/01_brücke.jpg
+++ b/foto/views/images/australien/3_buildings/01_brücke.jpg
--- a/foto/views/images/australien/3_buildings/02_hafen_bei_Nacht.jpg
+++ b/foto/views/images/australien/3_buildings/02_hafen_bei_Nacht.jpg
--- a/foto/views/images/australien/3_buildings/03_hafen.jpg
+++ b/foto/views/images/australien/3_buildings/03_hafen.jpg
--- a/foto/views/images/australien/3_buildings/04_opera.jpg
+++ b/foto/views/images/australien/3_buildings/04_opera.jpg
--- a/foto/views/images/australien/3_buildings/05_opera.jpg
+++ b/foto/views/images/australien/3_buildings/05_opera.jpg
--- a/foto/views/images/australien/3_buildings/06_queen_victoria_B.jpg
+++ b/foto/views/images/australien/3_buildings/06_queen_victoria_B.jpg
--- a/foto/views/images/australien/3_buildings/07_blick_nach_oben.jpg
+++ b/foto/views/images/australien/3_buildings/07_blick_nach_oben.jpg
--- a/foto/views/images/australien/3_buildings/08_skyline_sydney.jpg
+++ b/foto/views/images/australien/3_buildings/08_skyline_sydney.jpg
--- a/foto/views/images/australien/3_buildings/09_sydney_bridge.jpg
+++ b/foto/views/images/australien/3_buildings/09_sydney_bridge.jpg
--- a/foto/views/images/australien/3_buildings/10_sydney_harbour.jpg
+++ b/foto/views/images/australien/3_buildings/10_sydney_harbour.jpg
--- a/foto/views/images/australien/3_buildings/11_sydney_opera.jpg
+++ b/foto/views/images/australien/3_buildings/11_sydney_opera.jpg
--- a/foto/views/images/australien/3_buildings/12_clock.jpg
+++ b/foto/views/images/australien/3_buildings/12_clock.jpg
--- a/foto/views/images/australien/3_buildings/13_blumenkorb.jpg
+++ b/foto/views/images/australien/3_buildings/13_blumenkorb.jpg
--- a/foto/views/images/australien/4_nature/01_sun_at_night.jpg
+++ b/foto/views/images/australien/4_nature/01_sun_at_night.jpg
--- a/foto/views/images/australien/4_nature/02_river_bed.jpg
+++ b/foto/views/images/australien/4_nature/02_river_bed.jpg
--- a/foto/views/images/australien/4_nature/03_koala.jpg
+++ b/foto/views/images/australien/4_nature/03_koala.jpg
--- a/foto/views/images/australien/4_nature/04_mountains.jpg
+++ b/foto/views/images/australien/4_nature/04_mountains.jpg
--- a/foto/views/images/australien/4_nature/05_pengioms.jpg
+++ b/foto/views/images/australien/4_nature/05_pengioms.jpg
--- a/foto/views/images/australien/5_alicesprings/01_overlook.jpg
+++ b/foto/views/images/australien/5_alicesprings/01_overlook.jpg
--- a/foto/views/images/australien/5_alicesprings/02_mountains.jpg
+++ b/foto/views/images/australien/5_alicesprings/02_mountains.jpg
--- a/foto/views/images/australien/5_alicesprings/03_didgeridoo.jpg
+++ b/foto/views/images/australien/5_alicesprings/03_didgeridoo.jpg
--- a/foto/views/images/australien/5_alicesprings/04_museum.jpg
+++ b/foto/views/images/australien/5_alicesprings/04_museum.jpg
--- a/foto/views/images/australien/5_alicesprings/05_museum.jpg
+++ b/foto/views/images/australien/5_alicesprings/05_museum.jpg
--- a/foto/views/images/australien/5_alicesprings/06_hill.jpg
+++ b/foto/views/images/australien/5_alicesprings/06_hill.jpg
--- a/foto/views/images/australien/5_alicesprings/07_landscape.jpg
+++ b/foto/views/images/australien/5_alicesprings/07_landscape.jpg
--- a/foto/views/images/australien/5_alicesprings/08_baby.jpg
+++ b/foto/views/images/australien/5_alicesprings/08_baby.jpg
--- a/foto/views/images/australien/5_alicesprings/09_baby.jpg
+++ b/foto/views/images/australien/5_alicesprings/09_baby.jpg
--- a/foto/views/images/australien/5_alicesprings/10_drea_and_ostrich.jpg
+++ b/foto/views/images/australien/5_alicesprings/10_drea_and_ostrich.jpg
--- a/foto/views/images/australien/5_alicesprings/11_far_away.jpg
+++ b/foto/views/images/australien/5_alicesprings/11_far_away.jpg
--- a/foto/views/images/australien/5_alicesprings/12_lost_camel.jpg
+++ b/foto/views/images/australien/5_alicesprings/12_lost_camel.jpg
--- a/foto/views/images/australien/5_alicesprings/13_hotel.jpg
+++ b/foto/views/images/australien/5_alicesprings/13_hotel.jpg
--- a/foto/views/images/australien/5_alicesprings/14_hotel.jpg
+++ b/foto/views/images/australien/5_alicesprings/14_hotel.jpg
--- a/foto/views/images/australien/5_alicesprings/15_pool.jpg
+++ b/foto/views/images/australien/5_alicesprings/15_pool.jpg
--- a/foto/views/images/australien/5_alicesprings/16_roger.jpg
+++ b/foto/views/images/australien/5_alicesprings/16_roger.jpg
--- a/foto/views/images/australien/5_alicesprings/17_stones.jpg
+++ b/foto/views/images/australien/5_alicesprings/17_stones.jpg
--- a/foto/views/images/australien/5_alicesprings/18_sighns.jpg
+++ b/foto/views/images/australien/5_alicesprings/18_sighns.jpg
--- a/Show More
+++ b/Show More