CodingSkills

Code-Snippets » Simple Bildergalerie mit Blätterfunktion

Simple Bildergalerie mit Blätterfunktion

Um Bilder aus einem Unterordner in PHP auszulesen und eine Bildergalerie mit Thumbnails zu erstellen, kannst du den folgenden Ansatz verwenden:

1. Erstelle einen Unterordner in deinem Projekt, in dem du die Bilder speichern möchtest. Zum Beispiel kannst du ihn "images" nennen.

2. Lade die Bilder in den Unterordner "images" hoch.

3. Verwende die Funktion scandir() in PHP, um die Liste der Dateien im Unterordner abzurufen. Filtere dabei nur nach Bildern.

Code anklicken zum kopieren

$imageDirectory = 'images/';

   $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];

   

   $files = scandir($imageDirectory);

   

   $imageFiles = array_filter($files, function ($file) use ($allowedExtensions) {

       $extension = pathinfo($file, PATHINFO_EXTENSION);

       return in_array(strtolower($extension), $allowedExtensions);

   });

Code anklicken zum kopieren


4. Um Thumbnails automatisch zu generieren, kannst du die GD-Bibliothek verwenden, die in PHP enthalten ist. Mit GD kannst du Bilder manipulieren und Thumbnails erstellen.

Code anklicken zum kopieren

$thumbnailDirectory = 'thumbnails/';

   $thumbnailSize = 150; // Größe des Thumbnails in Pixel

   

   foreach ($imageFiles as $file) {

       $sourceImagePath = $imageDirectory . $file;

       $extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));

   

       switch ($extension) {

           case 'jpg':

           case 'jpeg':

               $sourceImage = imagecreatefromjpeg($sourceImagePath);

               break;

           case 'png':

               $sourceImage = imagecreatefrompng($sourceImagePath);

               break;

           case 'gif':

               $sourceImage = imagecreatefromgif($sourceImagePath);

               break;

           default:

               // Dateiformat wird nicht unterstützt

               continue 2; // Überspringe die Schleife und fahre mit dem nächsten Bild fort

       }

   

       $thumbnailWidth = $thumbnailSize;

       $thumbnailHeight = $thumbnailSize;

   

       $sourceWidth = imagesx($sourceImage);

       $sourceHeight = imagesy($sourceImage);

   

       if ($sourceWidth > $sourceHeight) {

           $thumbnailHeight = intval($sourceHeight / $sourceWidth * $thumbnailWidth);

       } else {

           $thumbnailWidth = intval($sourceWidth / $sourceHeight * $thumbnailHeight);

       }

   

       $thumbnailImage = imagecreatetruecolor($thumbnailWidth, $thumbnailHeight);

       imagecopyresampled(

           $thumbnailImage,

           $sourceImage,

           0, 0, 0, 0,

           $thumbnailWidth, $thumbnailHeight,

           $sourceWidth, $sourceHeight

       );

   

       $thumbnailName = $thumbnailDirectory . $file;

   

       switch ($extension) {

           case 'jpg':

           case 'jpeg':

               imagejpeg($thumbnailImage, $thumbnailName);

               break;

           case 'png':

               imagepng($thumbnailImage, $thumbnailName);

               break;

           case 'gif':

               imagegif($thumbnailImage, $thumbnailName);

               break;

       }

   

       imagedestroy($sourceImage);

       imagedestroy($thumbnailImage);

   }

Code anklicken zum kopieren


Stelle sicher, dass du das Verzeichnis "thumbnails" erstellst, in dem die generierten Thumbnails gespeichert werden.

5. Jetzt hast du die Originalbilder im "images"-Ordner und die generierten Thumbnails im "thumbnails"-Ordner. Du kannst sie verwenden, um die Bildergalerie auf deiner Webseite zu erstellen.

Code anklicken zum kopieren

$thumbnailsDirectory = 'thumbnails/';

   

   foreach ($imageFiles as $file) {

       $thumbnailPath = $thumbnailsDirectory . $file;

       $imagePath = $imageDirectory . $file;

   

       echo '<a href="' . $imagePath . '" target="_blank">';

       echo '<img src="' . $thumbnailPath . '" alt="Thumbnail">';

       echo '</a>';

   }

Code anklicken zum kopieren


Dieser Code erstellt für jedes Bild einen Link, der das Bild in einem neuen Tab öffnet. Das Thumbnail wird als Bild in der img-Tags angezeigt.

6. Um die Blätterfunktion zu implementieren und die Anzahl der Bilder pro Seite anzugeben, kannst du die array_chunk()-Funktion verwenden.

Code anklicken zum kopieren

$imagesPerPage = 10;

   $paginatedImageFiles = array_chunk($imageFiles, $imagesPerPage);

   

   // Hier musst du den aktuellen Seitennummer-Parameter einbeziehen, z. B. durch GET oder POST

   

   $currentPage = isset($_GET['page']) ? $_GET['page'] : 1;

   $currentImages = $paginatedImageFiles[$currentPage - 1];

   

   foreach ($currentImages as $file) {

       // Erzeuge Thumbnails und erstelle Links wie im vorherigen Schritt

   }

Code anklicken zum kopieren


Du musst sicherstellen, dass du den aktuellen Seitennummer-Parameter in deinem Code richtig verarbeitest, um die richtigen Bilder für die aktuelle Seite anzuzeigen.

Das ist eine grundlegende Anleitung, um eine einfache Bildergalerie mit Thumbnails in PHP zu erstellen. Beachte jedoch, dass es viele weitere Funktionen und Verbesserungen gibt, die du in deine Bildergalerie einfügen kannst, wie z. B. eine Lightbox-Ansicht oder Responsive Design für mobile Geräte.

Der vollständige Code sieht dann so aus:

Code anklicken zum kopieren

<?php

// Funktion zum Auslesen der Dateien im Bilderverzeichnis

function getImagesFromDirectory($directory, $allowedExtensions)

{

    $files = scandir($directory);

    

    $imageFiles = array_filter($files, function ($file) use ($allowedExtensions) {

        $extension = pathinfo($file, PATHINFO_EXTENSION);

        return in_array(strtolower($extension), $allowedExtensions);

    });

    

    return $imageFiles;

}



// Funktion zum Generieren von Thumbnails

function generateThumbnail($sourceImagePath, $thumbnailImagePath, $thumbnailSize)

{

    $extension = strtolower(pathinfo($sourceImagePath, PATHINFO_EXTENSION));

    

    switch ($extension) {

        case 'jpg':

        case 'jpeg':

            $sourceImage = imagecreatefromjpeg($sourceImagePath);

            break;

        case 'png':

            $sourceImage = imagecreatefrompng($sourceImagePath);

            break;

        case 'gif':

            $sourceImage = imagecreatefromgif($sourceImagePath);

            break;

        default:

            return false; // Dateiformat wird nicht unterstützt

    }

    

    $sourceWidth = imagesx($sourceImage);

    $sourceHeight = imagesy($sourceImage);

    

    if ($sourceWidth > $sourceHeight) {

        $thumbnailHeight = intval($sourceHeight / $sourceWidth * $thumbnailSize);

        $thumbnailWidth = $thumbnailSize;

    } else {

        $thumbnailWidth = intval($sourceWidth / $sourceHeight * $thumbnailSize);

        $thumbnailHeight = $thumbnailSize;

    }

    

    $thumbnailImage = imagecreatetruecolor($thumbnailWidth, $thumbnailHeight);

    imagecopyresampled(

        $thumbnailImage,

        $sourceImage,

        0, 0, 0, 0,

        $thumbnailWidth, $thumbnailHeight,

        $sourceWidth, $sourceHeight

    );

    

    switch ($extension) {

        case 'jpg':

        case 'jpeg':

            $success = imagejpeg($thumbnailImage, $thumbnailImagePath);

            break;

        case 'png':

            $success = imagepng($thumbnailImage, $thumbnailImagePath);

            break;

        case 'gif':

            $success = imagegif($thumbnailImage, $thumbnailImagePath);

            break;

    }

    

    imagedestroy($sourceImage);

    imagedestroy($thumbnailImage);

    

    return $success;

}



// Konfiguration

$imageDirectory = 'images/';

$thumbnailDirectory = 'thumbnails/';

$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];

$thumbnailSize = 150;

$imagesPerPage = 10;



// Bilder aus dem Verzeichnis auslesen

$imageFiles = getImagesFromDirectory($imageDirectory, $allowedExtensions);



// Thumbnails generieren

foreach ($imageFiles as $file) {

    $sourceImagePath = $imageDirectory . $file;

    $thumbnailImagePath = $thumbnailDirectory . $file;

    

    generateThumbnail($sourceImagePath, $thumbnailImagePath, $thumbnailSize);

}



// Blätterfunktion

$paginatedImageFiles = array_chunk($imageFiles, $imagesPerPage);

$currentPage = isset($_GET['page']) ? $_GET['page'] : 1;

$currentImages = $paginatedImageFiles[$currentPage - 1];

?>



<!DOCTYPE html>

<html>

<head>

    <title>Bildergalerie</title>

    <style>

        .thumbnail {

            display: inline-block;

            margin: 10px;

        }

        .thumbnail img {

            width: 150px;

            height: auto;

        }

    </style>

</head>

<body>

    <h1>Bildergalerie</h1>

    

    <?php foreach ($currentImages as $file): ?>

        <?php

        $thumbnailPath = $thumbnailDirectory . $file;

        $imagePath = $imageDirectory . $file;

        ?>

        <div class="thumbnail">

            <a href="<?php echo $imagePath; ?>" target="_blank">

                <img src="<?php echo $thumbnailPath; ?>" alt="Thumbnail">

            </a>

        </div>

    <?php endforeach; ?>

    

    <?php if (count($paginatedImageFiles) > 1): ?>

        <div class="pagination">

            <?php for ($i = 1; $i <= count($paginatedImageFiles); $i++): ?>

                <a href="?page=<?php echo $i; ?>"><?php echo $i; ?></a>

            <?php endfor; ?>

        </div>

    <?php endif; ?>

</body>

</html>

Code anklicken zum kopieren


Du darfst dieses Snippet kostenlos und uneingeschränkt nutzen, einschließlich kommerzieller Zwecke! Ich würde mich sehr darüber freuen, wenn du als kleine Geste der Anerkennung einen Link zu meiner Webseite auf deiner eigenen Seite platzieren könntest. Vielen Dank! :)