Fotogalerie mit Vorschauanzeige

Zuletzt aktualisiert: Samstag, 07. Januar 2017 Geschrieben von Jan Pionzewski

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, wird diese in einem Pop-up in Originalgröße geändert. Ein Klick auf das Pop-up lässt dieses wieder verschwinden.

 

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>

 

Hinweis:

Bitte beachte, dass bei diesem Script die Thumbnails genau so benannt sein müssen, wie die Originalgrafiken. Für die Thumbnails muss lediglich im Dateinamen ein tn_ vorangestellt werden (Beispiel: Original - foto01.jpg ; Thumbnail - tn_foto01.jpg).

 

 

Kommentare  
Sabine 2014-08-07 15:06
Hallo zusammen, leider werden die Bilder nicht nach Alphabet geordnet. Kann mir jemand sagen, wie ich dies programmieren könnte? Ganz lieben Dank für eure Rückmeldungen
Antworten | Antworten mit Zitat | Zitieren
Kommentar schreiben