Fotogalerie mit Vorschauanzeige

Mit dem folgenden Script kannst du eine sehr einfache Fotogalerie mit Vorschauanzeige erstellen. Das PHP-Script liest dabei alle Thumbnails deiner Grafiken aus einem bestimmten Verzeichnis aus und zeigt diese übersichtlich angeordnet an. Klickt nun der Seitenbesucher auf eine Grafik, öffnet sich ein PopUp-Fenster, in dem die Grafik in Originalgröße erscheint. Ein Klick auf das Pop-up lässt dieses wieder verschwinden.

 

Fotogalerie in die Website einbinden

Mit dem nachstehenden Code-Schnipsel kannst du deine Fotogalerie in die Website einbinden.

 

Code-Beispiel:

<?php
 
 $PfadThumbnails = "thumbnails/";
 $PfadBilder = "images/";
 $AnzahlThumbnailsProZeile = 3;
 
 if($Verzeichniszeiger = opendir($PfadThumbnails))
 {
     $Table = "<table border=\"0\" cellpadding=\"2\" cellspacing=\"5\"><tr>";
     $i = 0;
 
     while($Datei = readdir($Verzeichniszeiger))
     {
         if(substr($PfadThumbnails.strtolower($Datei), -4) == ".jpg" || substr($PfadThumbnails.strtolower($Datei), -5) == ".jpeg" || substr(strtolower($PfadThumbnails.$Datei), -4) == ".gif" || substr($PfadThumbnails.strtolower($Datei), -4) == ".png")
         {
             $Bilddaten = getimagesize($PfadBilder.substr($Datei, 3));
             $Bildbreite = $Bilddaten[0];
             $Bildhoehe = $Bilddaten[1];
             $Thumbnaildaten = getimagesize($PfadThumbnails.$Datei);
             $Thumbnailbreite = $Thumbnaildaten[0];
             $Thumbnailhoehe = $Thumbnaildaten[1];
 
             if($i%$AnzahlThumbnailsProZeile == 0 && $i != 0)
             {
                 $Table .= "</tr><tr>";
             }
 
             $Table .= "<td><a href=\"javascript:GrafikAnzeigen('".$PfadBilder.substr($Datei, 3)."', '".$Bildbreite."', '".$Bildhoehe."');\"><img border=\"0\" height=\"".$Thumbnailhoehe."\" src=\"".$PfadThumbnails.$Datei."\" title=\"Zum Vergrößern aufs Foto klicken\" width=\"".$Thumbnailbreite."\"></a></td>";
             $i++;
         }
     }
 
     $Table .= "</tr></table>";
     closedir($Verzeichniszeiger);
 }
 
 ?>
 
 <html>
 <head>
 <title>Grafik passend in einem PopUp Fenster öffnen (mit PHP)</title>
 <script>
 <!--
 
 function GrafikAnzeigen(GrafikURL, Breite, Hoehe)
 {
     Fensteroptionen = "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0";
 
     Grafikfenster = window.open("", "", Fensteroptionen + ',width=' + Breite + ',height=' + Hoehe);
     Grafikfenster.focus();
     Grafikfenster.document.open();
 
     with(Grafikfenster)
     {
         document.write("<html><head>");
         document.write("<title>Grafikanzeige</title>");
         document.write("</head>");
         document.write("<body leftmargin=\"0\" marginheight=\"0\" marginwidth=\"0\" topmargin=\"0\">");
         document.write("<img border=\"0\" onclick=\"window.close();\" src=\""+ GrafikURL +"\" title=\"Zum Schließen auf das Foto klicken\">");
         document.write("</body></html>");
     }
 }
 
 //-->
 </script>
 </head>
 <body>
 
 <?php
 
 echo$Table;
 
 ?>
 
 </body>
 </html>

 

Erläuterung des Scripts

Damit dieses Script funktioniert, brauchst du nur wenige Vorbereitungen treffen. Die Vorschaubilder müssen lediglich genau so benannt sein, wie die Originalgrafiken. Außerdem musst du den Thumbnails im Dateinamen ein tn_ voranstellen (Beispiel: Original – foto01.jpg ; Thumbnail – tn_foto01.jpg).

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.