[PHP] Jak otworzyć okienko popup dopasowane wielkością do zdjęcia?
Chcesz pokazywać fotki w osobnych okienkach popup, ale tak, aby całe okienko było dokładnie wielkości fotki, a więc już podczas otwierania ma być do zdjęcia dopasowane.
Nie wiem, jak Ty, ale ja bardzo często tworzę podgląd dla zdjęć w osobnych okienkach pop-up zamiast tworzyć dla nich osobną stronę. Ponieważ podczas tworzenia takich okienek trzeba znać wymiary zdjęcia (są inne dla różnych fotografii) aby określić wielkość okna, więc warto prace zautomatyzować aby nie wpisywać tych liczb ręcznie.
Po kliknięciu na link zatytułowany np. "podgląd zdjęcia", pojawi się nowe okienko dopasowane idealnie do zdjęcia. Możesz takie rozwiązanie wprowadzić w sklepach (podgląd towarów), galeriach czy w bazach danych.
Na stronie ze zdjęciami wstaw następujący skrypt PHP:
<?
$zdjecie = "fotka.jpg";
if (file_exists($zdjecie)) {
$rozmiar = getimagesize($zdjecie);
echo "<a href=\"#\" onclick=\"open('okno.php?zdj=$zdjecie',
'okno','width=$rozmiar[0],height=$rozmiar[1]')\">zobacz zdjęcie</a>";
}
?>
Sprawdzi on czy podane zdjęcie istnieje na dysku, a jeżeli tak, pobierze jego rozmiary i wstawi je do tablicy $rozmiar. Teraz na podstawie rozmiarów można już tworzyć link wywołujący okno o nazwie okno.php, do którego przekazany zostanie parametr zdj z nazwą zdjęcia do pokazania w nim.
Wymiary okienka są takie same, jak wymiary zdjęcia, a te znamy, więc możemy wstawić wartość tablicy $rozmiar[0] (szerokość) i $rozmiar[1] (wysokość) do wymiarów okienka.
Kod pliku okno.php wygląda następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>Okienko</title></head><body marginheight="0"
marginwidth="0" leftmargin="0" topmargin="0">
<?
$zdj=$_GET["zdj"];
$rozmiar = GetImageSize($zdj);
echo "<img src=\"$zdj\" $rozmiar[3]>";
?>
</body></html>
To zwykła strona, na której jeszcze raz pobieramy rozmiar zdjęcia przekazanego jako parametr i wstawiamy go na stronę. Ważne aby pozbyć się wszystkich zbędnych marginesów, stąd w elemencie body są one wyzerowane.