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

Kategoria wpisu JavaScript, jQuery, Kurs php Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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

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.

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.

Nasze skrypty:

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

Wyświetlanie obrazów z pomocą 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:

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.

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.

Jedyne co powyżej dodałam to:

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

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *