prosta galeria zdjęć typu slideshow

Na potrzeby dydaktyczne potrzebuję stworzyć prostą galerię zdjęć typu slideshow. Nie chcę używać dodatkowych bibliotek, czy framework-ów. Ma być czysty JS, PHP lub oba jednocześnie. Częściowo zrealizowałem to poniższym kodem (HTML i CSS odpuszam, oczywistości):

*function slide()
{ 
    n++;
    if (n==4) {n=1}; // testowo 3 zdjęcia w katalogu
    document.getElementById("galeria").innerHTML = '<img src="'+n+'.jpg" alt="obrazek" width=400px height=250px>'; 
    setTimeout(slide, 2000);
}*

Niby fajnie, ale są tutaj co najmniej 2 zagadnienia do ogarnięcia.

1. Za każdym razem, gdy dodam nowe zdjęcie do katalogu, muszę edytować powyższy kod. Bo skąd JS ma wiedzieć, ile zdjęć jest w katalogu? Tymczasem chcę, żeby za każdym razem gdy dodam lub usunę zdjęcie z katalogu galeria aktualizowała się automatycznie, bez ingerencji w kod. Coś takiego co prawda uzyskałem tworząc skrypt w PHP oraz korzystając z funkcji globe():
   foreach (glob(".jpg") as $plik) {}
   Ale czy za pomocą JS faktycznie tak nie da się zrobić? Z drugiej strony im mniej kodu widać po stronie przeglądarki (PHP jest na serwerze, JS każdy może pobrać i wyświetić), tym lepiej...

2. Płynne przejście pomiędzy zdjęciami. Kombinowałem z właściwością transition w stosunku do znaczika img src, ale nie zadziałało. Poszukałem w internecie i okazuje się, że mam 2 opcje: albo użyć dodatkowej bilioteki, albo jak poniżej:
   wstawiam wszystkie obrazki jeden na drugim (odpowiednie ustawienie właściwości position), a potem po prostu przełączam
   opacity wybranego zdjęcia z 0 na 1 i na odwrót. Faktycznie nie ma innego lepszego sposobu?

Ale czy za pomocą JS faktycznie tak nie da się zrobić?

Za pomocą JS nie. Za pomocą PHP przekazującego zmienną do JS tak.
filecount zawiera liczbę obrazków. Nietestowane.

$directory = "/path/to/dir/";
$filecount = 0;
$files = glob($directory . ".jpg");
if ($files){
 $filecount = count($files);
}
echo "There were $filecount files";
echo "<script>filecount = $filecount;</script>";

2. Płynne przejście pomiędzy zdjęciami. Kombinowałem z właściwością transition w stosunku do znaczika img src, ale nie zadziałało.
   Poszukałem w internecie i okazuje się, że mam 2 opcje: albo użyć dodatkowej bilioteki, albo jak poniżej:
   wstawiam wszystkie obrazki jeden na drugim (odpowiednie ustawienie właściwości position),
   a potem po prostu przełączam opacity

W żadnym razie. Transitions działa jak marzenie. Pewnie coś źle ustawiłeś w parametrach.

Freja Draco napisał(a):

Ale czy za pomocą JS faktycznie tak nie da się zrobić?

Za pomocą JS nie. Za pomocą PHP przekazującego zmienną do JS tak.
filecount zawiera liczbę obrazków. Nietestowane.

$directory = "/path/to/dir/";
$filecount = 0;
$files = glob($directory . ".jpg");
if ($files){
 $filecount = count($files);
}
echo "There were $filecount files";
echo "<script>filecount = $filecount;</script>";

Skąd skrypt JS będzie wiedział, czym jest $filecount? Gdzie tak naprawdę siedzi zmienna zadeklarowana w PHP?

2. Płynne przejście pomiędzy zdjęciami. Kombinowałem z właściwością transition w stosunku do znaczika img src, ale nie zadziałało.
   Poszukałem w internecie i okazuje się, że mam 2 opcje: albo użyć dodatkowej bilioteki, albo jak poniżej:
   wstawiam wszystkie obrazki jeden na drugim (odpowiednie ustawienie właściwości position),
   a potem po prostu przełączam opacity

W żadnym razie. Transitions działa jak marzenie. Pewnie coś źle ustawiłeś w parametrach.

Tak próbowałem:

img {transition: 1s ease-in-out;}

https://stackoverflow.com/questions/10889233/efficient-way-to-pass-variables-from-php-to-javascript

Skąd skrypt JS będzie wiedział, czym jest $filecount? Gdzie tak naprawdę siedzi zmienna zadeklarowana w PHP?

JS nic nie wie, o tym, co robi PHP.
PHP najpierw sprawdza sobie liczbę plików we wskazanym katalogu i zapisuje w zmiennej $filecount
Później jest polecenie wypisania tekstu na ekranie:

echo "<script>filecount = $filecount;</script>";

Efektem jego pracy jest taki zapis widoczny dla przeglądarki i JS-a:

<script>filecount = 123;</script>

Tak próbowałem:
img {transition: 1s ease-in-out;}

To chyba jest ok, pewnie gdzie indziej coś jest źle. Patrz np. na te przykłady:
https://www.w3schools.com/css/css3_transitions.asp

Zrobiłem to tak:

1. Wrzucamy div i ustawiamy domyślne tło: background-image: url("1.jpg");
2. Do tego oczywiście: transition: 2s ease-in-out;
3. Z poziomu JS wrzucam odpowiedni string, gdzie n to numer kolejnej fotki: document.getElementById("pokaz").style.backgroundImage = 'url("n.jpg")';

Dobra, już kumam. Nie zrobisz sobie płynnego przejścia, przy zmianie src IMG. To było dla mnie tak oczywiste, że nawet nie zrozumiałam, że tak właśnie wymyśliłeś :) Zatem musisz mieć przynajmniej dwa obrazki i manipulować ich przezroczystości, jak sam już wymyśliłeś.