Jak automatycznie wyświetlić na stronie wszystkie obrazy z folderu? Prosta Galeria w PHP [JS]

Czas czytania: 2 minut

Dzisiaj pokażę wam jak wyświetlić na stronie wszystkie obrazy znajdujące się w folderze. Oczywiście będziemy to robić bez linkowania po kolei każdego zdjęcia. Od razu wyrzucimy wszystkie obrazy.

Żeby nasze zadanie miało sens – z naszych obrazków zrobimy następnie prostą galerię zdjęć! A więc do dzieła!

Przykładowa galeria

Co nam będzie potrzebne do zbudowania galerii zdjęć?!

Na pewno będziemy potrzebować jakieś obrazki, z których zbudujemy naszą galerię (ja je umieszczę w folderze images). Przyda się też edytor kodu np. Notepad++,  Visual Studio Code.

Galeria, którą zbuduje będzie wyposażona w popup dlatego przyda mi się:

https://lokeshdhakar.com/projects/lightbox2/

Interesują nas pliki:

  • lightbox.css
  • lightbox-plus-jquery.min.js

Dodatkowo skorzystam z biblioteki CSS Bootstrap – konkretnie przyda mi się ich grid.

Gotowa galeria do Pobrania

Struktura strony + skrypty

Poniżej zamieściłam kod HTML z podłączonymi skryptami potrzebnymi dla stworzenia galerii. Pamiętajcie, że plik trzeba zapisać jako .PHP mimo, że w poniższym kodzie nie ma jeszcze elementów tego typu.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Galery + LIGHTBOX</title>
        /* Bootstrap */
    <link href="css/bootstrap.min.css" rel="stylesheet">
        /* lightbox  */
    <link href="css/lightbox.min.css" rel="stylesheet">
    <script src="js/lightbox-plus-jquery.min.js"></script>
    <STYLE>   
    .example-image-link{ padding: 15PX; }
    </STYLE>
</head>
<body>
    <div class="image-set container">
           
          /* Kod Galerii  */

    </div>
</body>

</html>

Nasze skrypty:

        <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/lightbox.min.css" rel="stylesheet">
    <script src="js/lightbox-plus-jquery.min.js"></script>

Skoro mamy już szkielet możemy przystąpić do dalszej pracy.

Wyświetlanie obrazów z folderu używając PHP

Naszą naukę zaczniemy od PHP. Dawno nic na blogu nie pisałam o tym języku a o ironio dosyć często wykorzystuję go w pracy.

DEMO

Na początek pobierzemy nazwy wszystkich grafik z folderu z zdjęciami:

<?php
        /*  otwieramy folder z obrazami */
    $dirname = "images/";
        /* pobieramy nazwy plików z końcówką png,jpeg,jpg,gif */
    $images = glob("$dirname*.{png,jpeg,jpg,gif}", GLOB_BRACE);
    
        /* tworzymy pętlę w której wyświetlimy obrazy */
    foreach($images as $image) {

        /*  wyświetlamy jak zwykły obrazek tyle że w miejsce nazwy wpisujemy */ ?>
        <img class="example-image img-responsive" src="<?php echo $image; ?>" />
    <?php    
    }
?>

Powyższy kod wyrzuci nam na stronie wszystkie obrazki z folderu images. Tak naprawdę w ten sposób można wyciągnąć całą zawartość folderu na interesuje jednak tylko grafika. W tym pomoże nam właśnie ten fragment.

$images = glob("$dirname*.{png,jpeg,jpg,gif}", GLOB_BRACE);

Jak nietrudno się domyślić pobiera on pliki, które posiadają odpowiednie końcówki. Czyli np. mimo że SVG w teorii jest obrazem 🙂 nie będzie wzięty pod uwagę nawet jeśli jest w folderze.

Teraz początkujący kod i dodamy efekt wyskakującego okienka.

<?php
    $dirname = "images/";
    $images = glob("$dirname*.{png,jpeg,jpg,gif}", GLOB_BRACE);
    foreach($images as $image) {
        ?>
          <a class="example-image-link col-xs-12 col-sm-6 col-md-4" href="<?php echo $image; ?>" data-lightbox="example-set" data-title="">
        <img class="example-image img-responsive" src="<?php echo $image; ?>" />
      </a>
        <?php
    }
    ?>

Jedyne co powyżej dodałam to:

<a class="example-image-link col-xs-12 col-sm-6 col-md-4" href="<?php echo $image; ?>" data-lightbox="example-set" data-title="">
 /* obrazek  */
</a>

Gotowe dzieło możecie podziwiać Gotowa galeria PHP + lightbox

Galeria w wersji masonery