|
Grafik passend in einem PopUp Fenster öffnen (mit PHP) |
|
|
|
|
Dienstag, 19. September 2006 |
http://www.webmaster-resource.de/tricks/php/grafik-passend-in-einem-popup-fenster-oeffnen-mit-php.php
Um eine Grafik oder ein Foto vergrößert darstellen zu können, öffnet dieses kleine Javascript ein auf die Größe des Bildes zugeschnittenes PopUp-Fenster. Zusätzlich wird Ihnen durch den Einsatz von PHP das Notieren der Bildmaße erspart und eine Thumbnail-Galerie automatisch erzeugt.
Mit Hilfe von PHP werden die Bilder aus einem Ordner eingelesen und anschließend in einer Tabelle übersichtlich dargestellt. Beim Klick auf ein Vorschaubild (Thumbnail) öffnet sich ein PopUp-Fenster mit der entsprechenden Größe des Originalbildes.
Zu Anfang des Scriptes müssen Sie lediglich angeben, in welchem Ordner die Thumbnails ($PfadThumbnails) sowie die Originalbilder ($PfadBilder) liegen (jeweils mit abschließendem Slash). Außerdem müssen Sie festlegen, wie viele Bilder in der Thumbnailgalerie pro Zeile angezeigt werden sollen.
Bitte beachten Sie, dass die Thumbnails genauso benannt sein müssen wie die Originalbilder, lediglich ein "tn_" muss vorangestellt werden (z.B. Originalbild: "Foto001.jpg"; Thumbnail: "tn_Foto001.jpg").
Quellcode
1.
<?php
2.
3.
$PfadThumbnails = "thumbnails/";
4.
$PfadBilder = "images/";
5.
$AnzahlThumbnailsProZeile = 3;
6.
7.
if($Verzeichniszeiger = opendir($PfadThumbnails))
8.
{
9.
$Table = "<table border=\"0\" cellpadding=\"2\" cellspacing=\"5\"><tr>";
10.
$i = 0;
11.
12.
while($Datei = readdir($Verzeichniszeiger))
13.
{
14.
if(substr($PfadThumbnails.strtol
ower($Datei), -4) == ".jpg" || substr($PfadThumbnails.strtolower($Datei), -5) == ".jpeg" || substr(strtolower($PfadThumbnails.$Datei), -4) == ".gif" || substr($PfadThumbnails.strtolower($Datei), -4) == ".png")
15.
{
16.
$Bilddaten = getimagesize($PfadBilder.substr($Datei, 3));
17.
$Bildbreite = $Bilddaten[0];
18.
$Bildhoehe = $Bilddaten[1];
19.
$Thumbnaildaten = getimagesize($PfadThumbnails.$Datei);
20.
$Thumbnailbreite = $Thumbnaildaten[0];
21.
$Thumbnailhoehe = $Thumbnaildaten[1];
22.
23.
if($i%$AnzahlThumbnailsProZeile == 0 && $i != 0)
24.
{
25.
$Table .= "</tr><tr>";
26.
}
27.
28.
$Table .= "<td><a href=\"javascript:GrafikAnzeigen('".$PfadBilder.substr($Datei, 3)."', '".$Bildbreite."', '".$Bildhoehe."');\"><img border=\"0\" height=\"".$Thumbnailhoehe."\" src=\"".$PfadThumbnails.$Datei."\" title=\"Zum Vergrößern aufs Foto klicken\" width=\"".$Thumbnailbreite."\"></a></td>";
29.
$i++;
30.
}
31.
}
32.
33.
$Table .= "</tr></table>";
34.
closedir($Verzeichniszeiger);
35.
}
36.
37.
?>
38.
39.
<html>
40.
<head>
41.
<title>Grafik passend in einem PopUp Fenster öffnen (mit PHP)</title>
42.
<script>
43.
<!--
44.
45.
function GrafikAnzeigen(GrafikURL, Breite, Hoehe)
46.
{
47.
Fensteroptionen = "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable
=0";
48.
49.
Grafikfenster = window.open("", "", Fensteroptionen + ',width=' + Breite + ',height=' + Hoehe);
50.
Grafikfenster.focus();
51.
Grafikfenster.document.open();
52.
53.
with(Grafikfenster)
54.
{
55.
document.write("<html><head>");
56.
documen
t.write("<title>Grafikanzeige</title>");
57.
document.write("</head>
");
58.
document.write("<body leftmargin=\"0\" marginheight=\"0\" marginwidth=\"0\" topmargin=\"0\">");
59.
document.write("<img border=\"0\" onclick=\"window.close();\" src=\""+ GrafikURL +"\" title=\"Zum Schließen auf das Foto klicken\">");
60.
document.write("</body></html>");
61.
}
62.
}
63.
64.
//-->
65.
</script>
66.
</head>
67.
<body>
68.
69.
<?php
70.
71.
echo$Table;
72.
73.
?>
74.
75.
</body>
76.
</html> |
