Enrico: Immer noch Probleme mit unserer Fotogalerie

Hallo liebes Forum,

Leider, leider, leider muss ich Euch schon wieder bemühen, wenn ich auch schon ein gutes Stück vorangekommen bin.

Entschuldigt bitte die Länge meines Postings, aber ich wollte noch einmal ganz detailiert auf meine Probleme eingehen:

Hier zunächst meine zwei Probleme in der Übersicht:

[1] Abbildung einer Verzeichnisstruktur als Menü
[2] Erzeugung von Thumbnails unter Beibehaltung der Proportionen

Zu [1]

Eine komplette Verzeichnisstruktur am Bildschirm auszugeben funktioniert nun, nur nicht deren Umsetzung als dynamisch erzeugtes Menü.

Um das Problem verständlicher zu machen, möchte ich hier noch einmal weiter "ausholen":

Meine Ordnerstruktur sieht (auszugsweise) so aus:

Ausgangsordner pic/pic/klein/
      |
      +- 0_Tina
      |
      +- 1_Schatzi
      |
      +- 2_Familie

Diese Ordnerstruktur soll später - bezüglich der Ordnernamen natürlich noch bearbeitet - als Hauptmenü dargestellt werden.

Unterhalb dieser Ordner befinden sich unterschiedlich viele und u.U. noch weiter verschachtelte Ordner.

Beispiel (auszugsweise):

Ausgangsordner pic/pic/klein/
      |
      +- 0_Tina
      |     |
      |     +- 0_Einzelfotos
      |     |         |
      |     |         +- Kinderfotos
      |     |         |
      |     |         +- Einschulung
      |     |
      |     +- 1_Tina131Schatzi
      |
      +- 1_Familie
      |       |
      |       +- 0_Mama1Brigitte
      |       |
      |       +- 1_Papa1Gerhard

Jeder Unterordner soll zum darüberliegenden Ordner einen Menüpunkt repräsentieren, so dass das Menü (bearbeitet) so aussehen soll:

Menüpunkt "Tina"

Menüpunkt "Einzelfotos"
      Menüpunkt "Kinderfotos"
      Menüpunkt "Einschulung"

Menüpunkt "Tina & Schatzi"

Menüpunkt "Familie"

Menüpunkt "Mama Brigitte"
  Menüpunkt "Papa Gerhard"

Die Menüs werden dann über Javascript angezeigt und gewechselt:

<script type="text/javascript">
  <!--
    function show (divid)
    {
      d = document;
      d.getElementById("Tina").style.display    = "none";
      d.getElementById("Familie").style.display = "none";
      ... usw ...
      d.getElementById(divid).style.display= "inline";
    }
  //-->
</script>

<a href="#" onclick="show('Tina')">Tina</a><br>
<div id="Tina" style="display:none">
  <a href="#" onclick="show('TinaEinzelfotos')">Einzelfotos</a><br>
  <div id="TinaEinzelfotos" style="display:none">
    <a href="#">Kinderfotos</a><br>
    <a href="#">Einschulung</a><br>
  </div>
  <a href="#">Tina & Schatzi</a>
</div>
<br>

<a href="#" onclick="show('Familie')">Familie</a><br>
<div id="Familie" style="display:none">
  <a href="#">Mama Brigitte</a><br>
  <a href="#">Papa Gerhard</a>
</div>

Diese Menüstruktur soll nun 1:1 anhand der Ordnerstruktur am Bildschirm abgebildet werden.

Zu [2]

Thumbnails kann man ja über folgende Anweisungen erzeugen:

$scr         = $bilderpfad;
$dest        = "$ordner" . "$album" . "_" . "$name" . ".jpg";
$thumburl    = "$url" . "/thumbnails/" . "$album" . "_" . "$name" . ".jpg";
$imageInfo   = getimagesize ($scr);
$src_width   = $imageInfo [0];
$src_height  = $imageInfo [1];
$dest_height = "$dest_width" * "$src_height" / "$src_width";
$src_img     = imagecreatefromjpeg ($scr);
$dst_img     = imagecreatetruecolor($dest_width, $dest_height);

imagecopyresampled ($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_height, $src_width, $src_height);
imagejpeg          ($dst_img, $dest, 70);

+-                                -+
|  imagedestroy       ($src_img);  |
|  imagedestroy       ($dst_img);  |
+-                                -+

Mir geht es aber nicht darum, Thumbnails zu speichern, sondern nur darum, nach der Auswahl einer Galerie die Fotos, die in Originalgrösse auf der Festplatte (später auf der Festplatte) im jeweiligen Ordner liegen, als Thumbnails anzuzeigen.

Oder habe ich die obigen Befehle missverstanden ?

Das nächste Problem ist, wie ich die Thumbnails so verkleinere, dass das Seitenverhältnis beibehalten wird, da es sehr unschön aussieht, wenn die Vorschaubilder verzehrt sind.

Zudem weiss ich nicht, wie ich die Erzeugung von Thumbnails auf PNG-Bilder anwenden kann.

Ich hoffe, dass Ihr mir ausführlich weiterhelfen könnt, damit ich unsere Fotogalerie endlich fertigstellen kann.

(Wiedermal :o) ) vielen, vielen, vielen Dank im voraus.

Enrico

  1. Entschuldigt bitte, ich hatte vergessen, den Code zur Ausgabe einer Verzeichnisstruktur anzugeben:

    function createNav ($folder)
      {
        $handle = @opendir ($folder);

    while ($file = @readdir ($handle))
        {
          if ($file != "." && $file != "..")
          {
            if (is_dir ("$folder/$file"))
            {
              echo "Verzeichnis: $file<br>";
              createNav ("$folder/$file");
            }
            else
            {
              /*
                ... weitere Anweisungen (Bilder einlesen) ...
              */
            }
          }
        }
        closedir ($handle);
      }

    createNav ('pic/pic/klein');

  2. Hallo Enrico

    [1] Abbildung einer Verzeichnisstruktur als Menü

    Zu [1]

    Eine komplette Verzeichnisstruktur am Bildschirm auszugeben funktioniert
    nun, nur nicht deren Umsetzung als dynamisch erzeugtes Menü.

    Um das Problem verständlicher zu machen, möchte ich hier noch einmal weiter "ausholen":

    Meine Ordnerstruktur sieht (auszugsweise) so aus:

    [...]
    Diese Ordnerstruktur soll später - bezüglich der Ordnernamen
    natürlich noch bearbeitet - als Hauptmenü dargestellt werden.

    Unterhalb dieser Ordner befinden sich unterschiedlich viele und
    u.U. noch weiter verschachtelte Ordner.

    Beispiel (auszugsweise):

    [...]

    Jeder Unterordner soll zum darüberliegenden Ordner einen Menüpunkt
    repräsentieren, so dass das Menü (bearbeitet) so aussehen soll:

    Menüpunkt "Tina"
       Menüpunkt "Einzelfotos"
          Menüpunkt "Kinderfotos"
          Menüpunkt "Einschulung"
       Menüpunkt "Tina & Schatzi"

    Menüpunkt "Familie"
      Menüpunkt "Mama Brigitte"
      Menüpunkt "Papa Gerhard"

    Die Menüs werden dann über Javascript angezeigt und gewechselt:

    <script type="text/javascript">
      <!--
        function show (divid)
        {
    [...]
        }
      //-->
    </script>

    <a href="#" onclick="show('Tina')">Tina</a><br>
    <div id="Tina" style="display:none">
      <a href="#" onclick="show('TinaEinzelfotos')">Einzelfotos</a><br>
      <div id="TinaEinzelfotos" style="display:none">
    [...]
    Diese Menüstruktur soll nun 1:1 anhand der Ordnerstruktur am
    Bildschirm abgebildet werden.

    Aus deinen obigen Angaben habe ich mal Folgendes programmiert. (Geht bestimmt noch effizienter und besser.) Ich hoffe, ich habe dein Posting richtig verstanden.

    Nur bin ich nicht der JavaScript-Fachmann... Aber bei mir funktioniert deine JS-Funktion nicht.

    An deiner Stelle würde ich jedoch in diesem Fall auf JavaScript verzichten und das Auf- und Zuklappen der Menü-Punkte mit PHP realisieren.

    /****** Quellcode ***************************************************
       function getDirectoryAsArray($path) {
           $handle = @opendir($path);
           while ($file = @readdir ($handle)) {
               if (preg_match("/^.{1,2}$/", $file))
                  { continue; }

    if(is_dir($path.$file))
                  { $dir[$file] = getDirectoryAsArray($path.$file."/"); }
               else
                  { $dir[] = $file; }
           } // Ende: while-Schleife

    @closedir($handle);
           return $dir;
       } // Ende: function getDirectoryAsArray()

    function makeMenu($directory_tree, $pre = "", $quote = "0") {
          $var["javascript"] = "";
          $var["html"] = "";

    foreach($directory_tree as $k => $v) {
             if(is_array($v)) {
                $tab = "";
                for ($i=0; $i<$quote; $i++)
                   { $tab .= " "; }
                if (count($v)>0) {
                   $var["html"] .= $tab."<a href="#" onclick="show('".$pre.$k."')">".$k."</a><br />\n";
                   $var["html"] .= $tab."<div id="".$pre.$k."" style="display:none">\n";
                   $var["javascript"] .= "      d.getElementById("".$pre.$k."").style.display = "none";\n";
                   $tmp = makeMenu($v, $pre.$k, ($quote+3));
                   $var["html"] .= $tmp["html"];
                   $var["javascript"] .= $tmp["javascript"];
                   $var["html"] .= $tab."</div>\n";
                } else {
                   $var["html"] .= $tab."<a href="#">".$k."</a><br />\n";
                }
             }
          } // Ende: foreach-Schleife

    return $var;
       } // Ende: function makeMenu()

    $pfad = "/";       // Muss mit '/' enden.

    $verzeichnis_baum = getDirectoryAsArray($pfad);
      $menue_daten = makeMenu($verzeichnis_baum);

    $menue_daten["javascript"] = "<script type="text/javascript">\n"
                                  ."  <!--\n"
                                   ."   function show (divid) {\n"
                                  .$menue_daten["javascript"]
                                  ."      d.getElementById(divid).style.display = "inline";\n"
                                  ."    }\n"
                                  ."  //-->\n"
                                  ."</script>\n";

    echo "<html>\n";
       echo "<head>\n";
       echo $menue_daten["javascript"];
       echo "</head>\n";
       echo "<body>\n";
       echo $menue_daten["html"];
       echo "</body>\n";
       echo "</html>\n";

    1. Hallo Xava,

      Erstmal vielen Dank für Dein Engagement. Das Hauptmenü wird perfekt aufgebaut, nur leider funktioniert das weitere Öffnen nicht.

      Aber da kann ich nachhaken ;-)

      Gruss, Enrico