[PHP] Jak wykonać uniwersalną galerię miniturowych zdjęć, które po kliknięciu otworzą się w pełnym rozmiarze?

Chcesz stworzyć szybki i automatyczny mechanizm do prezentowania fotek zgromadzonych w katalagu.

Nie ma chyba osoby, która nie myślała kiedyś o wykonaniu serwisu z własnymi fotografiami. Tworzenie takiej strony kojarzy Ci się pewnie z mozolnym pisaniem tabel, rozmiarów zdjęcia, poleceń HTML, wykonaniem osobnych plików do pokazania każdej fotografii.

Owszem, niektórzy się z tym męczą, tylko czemu to robią? Mam inne podejście do takich zagadnień. Jedyne co chciałbym zrobić to umieścić dowolną ilość zdjęć (dużych i miniatur) w katalogu, a skrypt sam ma się zatroszczyć o resztę.

I taki skrypt znajdziesz poniżej. Sam pobierze zawartość katalogu, sam skomponuje tabelkę, dzieląc ją na komórki w zależności od tego, ile miniaturek chcesz zobaczyć w jednej linijce. Sam pobierze rozmiary plików graficznych, a po kliknięciu w miniaturę pokaże duże zdjęcie.

Wystarczy do każdego katalogu ze zdjęciami wrzucić plik index.php z poniższym skryptem i już! Reszta Cię nie interesuje. I słusznie, od brudnej roboty są komputery, prawda? No... i programiści piszący takie skrypty...

<center>

<?

$zdjecie = $_GET["zdjecie"];

$linia = 5; // liczba zdjec w jednym wierszu (w jednej linii obok siebie)

if ($zdjecie<>"") {

// duze zdjecie

$rozmiar = GetImageSize("$zdjecie.jpg");

echo "<img src=\"$zdjecie.jpg\" $rozmiar[3]>";

} else {

// miniaturki

$szerokosc = 100/$linia;

$katalog = opendir("./");

while ($plik = strtolower(readdir($katalog))) {

if (($plik<>".")&&($plik<>"..")&&($plik<>"index.php"))

if (!is_dir($plik) and eregi("t",$plik)) $lista[]=$plik;

}

closedir($katalog);

sort($lista);

echo "<table border=1 cellspacing=0 cellpadding=10>";

foreach($lista as $fotka) {

$licznik++;

if ($licznik==1) echo "<tr>";

echo "<td width=$szerokosc% align=center>";

$rozmiar = GetImageSize($fotka);

$fotka = eregi_replace("t.jpg","",$fotka);

echo "<a href=\"?zdjecie=$fotka\"><img src=\"$fotka"."t.jpg\"

border=0 $rozmiar[3]></a>";

echo "</td>";

if ($licznik==$linia) { echo "</tr>"; $licznik=0; }

}

$koniec=$linia-count($lista)%$linia;

if ($koniec<>$linia)

for ($i=0;$i<$koniec;$i++) echo "<td width=$szerokosc%>&nbsp;</td>";

echo "</table>";

}

?>

</center>

Pliki z dużymi zdjęciami, jakie umieszczasz w katalogu, muszą nazywać się 01.jpg, 02.jpg itd. Miniaturki nazywają się tak samo, z tym, że mają dodatkową literkę t, np. 01t.jpg, 02t.jpg. Plików może być dowolna ilość i nie muszą być numerowane po kolei. Katalog może zawierać np. takie pliki:

01.jpg

01t.jpg

05.jpg

05t.jpg

06.jpg

06t.jpg

01t.jpg

09.jpg

09t.jpg

index.php

W skrypcie możesz zmienić ilość miniaturek, jakie przypadają na jeden rząd. W tej chwili jest ich 5, bo gdy obrazki są małe np. 100x75, ładnie mieszczą się na ekranie.

Jeżeli zmienna $zdjecie zawiera jakiś numer, skrypt pokaże duże zdjęcie o podanym numerze, wcześniej pobierając jego rozmiar aby zostało poprawnie wyświetlone na ekranie.

Jeżeli zmienna $zdjecie nie będzie ustawiona, wtedy generowane będą miniaturki na podstawie plików znajdujących się w katalogu. Wcześniej jednak obliczam zmienną $szerokosc, która posłuży mi do ustawienia szerokości kolumn z obrazkami (każda kolumna będzie miała taką samą szerokość).

Z katalogu pobierane są wszystkie pliki zawierające w nazwie literkę t (a więc miniaturki), które następnie są sortowane. Na podstawie listy pobranych plików generowana jest już tabelka z miniaturami.

Tu również pobierane są rozmiary pliku graficznego i jest on podlinkowany w taki sposób, aby po kliknięciu wywołać duże zdjęcie (przekazywany jest parametr zdjecie z numerem dużego zdjęcia do pokazania).

Jeżeli zdjęć w rzędzie jest mniej niż kolumn tabeli, pozostałe pola wypełniane są spacjami. Jak widzisz, wszystko dzieje się automatycznie i znacznie ułatwia pokazywanie niewielkich galerii zdjęć na stronie. Jeżeli zdjęć jest wiele, możesz w osobnych katalogach umieścić po kilkanaście (kilkadziesiąt) i do każdego katalogu dodać skrypt w pliku index.php.

Jeżeli trzymasz numerację kolejną plików, np. (03, 04, 05, 06, itd..) , możesz dodać przyciski "następne zdjęcie", "poprzednie zdjęcie" i "powrót do miniatur". Możesz też dodać opis do zdjęcia, wystarczy umieścić go w pliku z numerem zdjęcia, np. 03.txt, 05.txt - jeżeli plik tekstowy będzie istniał, zostanie wyświetlony pod zdjęciem.

Aby to uzyskać wystarczy tylko lekko zmodyfikować kod wyświetlania dużego zdjęcia:

<center>

<?

$zdjecie = $_GET["zdjecie"];

$linia = 5; // liczba zdjec w jednym wierszu (w jednej linii obok siebie)

if ($zdjecie<>"") {

$pop = sprintf("%02d", $zdjecie-1);

$nas = sprintf("%02d", $zdjecie+1);

if (file_exists("$pop.jpg")) {

echo "<a href=\"?zdjecie=$pop\">&lt;&lt;&lt; poprzednie</a>";

} else {

echo "<font color=gray>&lt;&lt;&lt; poprzednie</font>";

}

echo " &#149; <a href=\"index.php\">powrót do miniatur</a> &#149; ";

if (file_exists("$nas.jpg")) {

echo "<a href=\"?zdjecie=$nas\">następne &gt;&gt;&gt;</a>";

} else {

echo "<font color=gray>następne &gt;&gt;&gt;</font>";

}

echo "<p>";

$rozmiar = GetImageSize("$zdjecie.jpg");

echo "<img src=\"$zdjecie.jpg\" $rozmiar[3]>";

// dodaje opis do zdjęcia z pliku .txt z numerem fotki

echo "<p align=left>";

if (file_exists("$zdjecie.txt")) include("$zdjecie.txt");

} else {

// miniaturki

$szerokosc = 100/$linia;

$katalog = opendir("./");

while ($plik = strtolower(readdir($katalog))) {

if (($plik<>".")&&($plik<>"..")&&($plik<>"index.php"))

if (!is_dir($plik) and eregi("t\.",$plik)) $lista[]=$plik;

}

closedir($katalog);

sort($lista);

echo "<table border=1 cellspacing=0 cellpadding=10>";

foreach($lista as $fotka) {

$licznik++;

if ($licznik==1) echo "<tr>";

echo "<td width=$szerokosc% align=center>";

$rozmiar = GetImageSize($fotka);

$fotka = eregi_replace("t.jpg","",$fotka);

echo "<a href=\"?zdjecie=$fotka\"><img src=\"$fotka"."t.jpg\"

border=0 $rozmiar[3]></a>";

echo "</td>";

if ($licznik==$linia) { echo "</tr>"; $licznik=0; }

}

$koniec=$linia-count($lista)%$linia;

if ($koniec<>$linia)

for ($i=0;$i<$koniec;$i++) echo "<td width=$szerokosc%>&nbsp;</td>";

echo "</table>";

}

?>

</center>

---