[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%> </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\"><<< poprzednie</a>";
} else {
echo "<font color=gray><<< poprzednie</font>";
}
echo " • <a href=\"index.php\">powrót do miniatur</a> • ";
if (file_exists("$nas.jpg")) {
echo "<a href=\"?zdjecie=$nas\">następne >>></a>";
} else {
echo "<font color=gray>następne >>></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%> </td>";
echo "</table>";
}
?>
</center>