Fotogalerie mit Vorschauanzeige

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

Im Folgenden zeige ich dir in diesem Artikel, wie du eine solche Galerie auch in deiner Website einbauen kannst.

 

Eine Fotogalerie in die Website einbinden

Mit diesem Snippet kannst du dabei eine Fotogalerie in deine Website einbinden.

 

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>

 

Erklärung:

Damit dieses Script funktioniert, brauchst du dazu nur wenige Vorbereitungen treffen. Die Vorschaubilder müssen dabei immer genau so benannt sein, wie die Originalgrafiken. Weiterhin musst du den Dateinamen der Thumbnails ein tn_ voranstellen. Beispiel: Original – foto01.jpg ; Thumbnail – tn_foto01.jpg. Hast du alles getan, kannst du das Script ohne Probleme nutzen.

Ergänzend hierzu könntest du vielleicht auch ein Zufallsbild auf deiner Website anzeigen lassen. Oder du lässt eine Grafik stündlich wechseln. Weiterhin könntest du auch eine Art Diashow mit HTML anstelle einer Bildergalerie erstellen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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