In diesem Tutorial soll erklärt werden, wie man sich ohne große Probleme eine eigene Galerie für die Homepage erstellt, ohne dass man dazu eine Datenbank benötigt. Ein paar Vorkenntnisse in HTML und ggf. in PHP wären jedoch sehr hilfreich. Auf CSS werde ich in diesem Tutorial nicht näher eingehen, daher wird es auch nicht verwendet, auch wenn es sicherlich stellenweise schöner wäre.




Unsere Galerie wird zunächst auf einer einfachen HTML Tabelle aufbauen, die uns den Rahmen für unsere Bilder liefern soll. Im Beispiel nehmen wir eine dreispaltige Tabelle ohne Rahmen mit einer Gesamtbreite von 510 Pixeln. Das bedeutet, dass unsere Spalten jeweils eine Breite von 170 Pixeln haben. Für die Zeilenhöhe wählen wir in diesem Fall 120 Pixel. Der Grund liegt darin, dass wir unsere Bildchen mittig in die Zellen setzen mit einer Größe von 150 x 100 Pixel und somit einen freibleibenden Rand von jeweils 10 Pixel an allen Seiten haben. Dadurch wirken unsere Bilder nicht so aneinandergepresst.

Natürlich sind auch andere Varianten der Tabelle, z.B. mit einem 1px breiten Rahmen oder ähnlichem, sowie andere Bildgrößen möglich.

Für unseren Fall würde der Quellcode einer vorerst zweizeiligen Tabelle so aussehen:

Code:


Eine Vorschau im Dreamweaver würde für diese Tabelle dann so aussehen:






Unsere Tabelle ist soweit fertig. Jetzt können wir uns dem Einbauen der Bilder widmen. Wie oben schon genannt, wollen wir hier die Bilder in einer Größe von 150x100 Pixel anzeigen. Hierzu gibt es zwei Möglichkeiten:

Man kann die Bilder in der Originalgröße einbauen (in unserem Fall mit einer maximalen Breite von 500 Pixeln) und im Bild-Tag dann auf die richtige Größe schrumpfen. Dies könnte dann wie folgt aussehen:

Code:


Diese Variante hat den großen Nachteil, dass unsere Bilder komplett in ihrer Größe geladen werden, bevor sie dann als Kleinformat angezeigt werden. Obwohl der Nutzer also nur kleine Bilder sieht, hat er lange Wartezeiten, was man bei einer großen Galerie mit vielen Bildern dann dementsprechend hochrechnen kann…

Die andere Methode wäre, von den Originalbildern selbst kleine Vorschau-Bilder zu erstellen. Hierzu kann man die Galeriebilder einfach mit Photoshop oder einem anderen Grafikprogramm auf die gewünschte Größe (hier ja 150x100 Pixel) schrumpfen. Zur Übersicht speichert man die kleinen Bilder am besten unter dem gleichen Namen wie ihre Originale, nur mit dem Anhang „_k“ für klein oder ähnliches. Der Code für diese Variante würde dann so aussehen:

Code:


Diese Variante spart zwar Ladezeiten, jedoch hat der Ersteller zu Anfang bedeutend mehr Arbeit, da er für alle Bilder zusätzlich eine kleine Ansicht erstellen muss. Außerdem wird auf dem Webspace zusätzlicher Speicherplatz für die kleinen Bilder benötigt. Jedoch rechnet sich das erst mit der Masse.

Für welche Variante man sich entscheidet, liegt daher im Endeffekt beim Ersteller der Galerie. Ich selbst nutze lieber die zweite Möglichkeit.




Wir haben uns nun für eine Variante entschieden und auch unsere Bildchen schön eingebaut. Schauen wir uns das Ganze nun im Internet Explorer, Firefox oder ähnlichem an, dann sollte das Ergebnis so aussehen:



Doch widmen wir uns nun dem eigentlichen Hauptteil unserer Galerie. Wie verlinken wir die Bilder mit PHP jetzt so, dass wir nur eine Seite für den Aufruf der großen Bilder brauchen? Ganz einfach, wir machen unsere Bilder zu Hyperlinks und geben in der URL einfach einen Parameter mit, der unser jeweiliges Bild identifiziert. Das könnte als Quelltext dann folgendermaßen aussehen:

Code:


Nun eine kurze Erklärung zum Code: Das Fragezeichen nach dem eigentlichen Seitenaufruf dient zum Verbinden der Seite mit der 1. Variable, die wir übergeben wollen. Nach dem Fragezeichen folgt also der Variablennamen, in unserem Fall „link“, gefolgt von einem Gleichzeichen und dem Variablenwert, in diesem Fall das Bild, welches aufgerufen werden soll.

Bauen wir nun diese Codeschnipsel in unsere Tabelle ein, dann sollte das Ergebnis ungefähr so aussehen:

Code:





Der erste Teil unserer Galerie ist nun funktionsfähig. Nun müssen wir nur noch die zweite Seite erstellen, auf welcher unsere Bilder, dann in der Originalgröße zu sehen sein sollen. Natürlich soll auf dieser Seite jedoch nur jeweils eines unserer Galeriebilder angezeigt werden und zwar die Großansicht des gerade angeklickten.

Um dies zu verwirklichen, erstellen wir unsere zweite Seite, in diesem Fall schon als „bilder_g.php“ benannt. Bei dieser Seite und bei unserer Galerieseite ist es wichtig, dass es sich um .php Dateien und nicht um .html Dateien handelt, da unser PHP-Code ansonsten leider nicht funktioniert!

Neben den Layoutbefehlen und anderen Schönheitsfragen bauen wir in unseren Code auf der „bilder_g.php“ Seite dann folgenden Code ein:

Code:


So, und wenn ihr das nun für all eure Bilder gemacht habt, dann könnte eure Ansicht für ein aufgerufenes Bild im Internet Explorer o.ä. so aussehen:



Ich hoffe, ich konnte euch ein wenig weiterhelfen und ihr habt ein wenig Spaß mit eurer Galerie, auch wenn sie vom Aufwand her wohl etwas mehr bedarf als eine SQL basierende Galerie. Solltet ihr noch Fragen haben, einfach bei mir melden.

Liebe Grüße
Tina

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!