front end blog dla początkujących, pytania i odpowiedzi - strony www
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 z wybranego katalogu.
Żeby nasze zadanie miało sens – z naszych obrazków zrobimy następnie prostą galerię zdjęć! A więc do dzieła!
Na pewno będziemy potrzebować jakieś obrazki, z których zbudujemy naszą galerię (ja je umieszczę w folderze images – jednak jeśli nie chcesz wyświetlić grafik z biblioteki to utwórz inny folder). 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:
Dodatkowo skorzystam z biblioteki CSS Bootstrap – konkretnie przyda mi się ich grid.
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.
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.
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
Uwaga: jeśli chcecie posortować wasze zdjęcia alfabetycznie należy posortować zawartość tablicy – $images. Do tego celu przyda się funkcja sort();
<?php
$dirname = "images/";
$images = glob("$dirname*.{png,jpeg,jpg,gif}", GLOB_BRACE);
sort($images); /* Sortowanie alfabetyczne */ 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
}
?>Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…