| Anleitung.html | |||||||||
Diese Datei, die Sie gerade lesen! Bitte nicht online stellen, denn da macht sie keinen Sinn! | |||||||||
| Galerie.html, Galerie2.html, Galerie3.html | |||||||||
Dies sind drei Beispiele, wie sie die Bildergalerie verwenden können. Auch diese Dateien machen so online natürlich keinen
Sinn. Sie sind aber gut als Orientierungshilfe oder um den Inhalt zu kopieren und eine eigene Übersichtsseite zu erstellen. Die einzelnen Übersichtsseiten dürfen gerne in Unterordnern untergebracht werden, aber auf keinen Fall in einem Ordner oberhalb von Bildgross.html. Wenn unten ein Verweis zu den übrigen Galerien erscheinen soll müssen Sie in diesen Dateien für jede Galerie die Galerienummer definieren (in der Variablen nummer) und es muß Fotos.js im Head-Bereich geladen werden. Die entsprechenden Stellen sind in den Dateien kommentiert. Der Variabel muss dabei die gleiche Nummer zugewiesen werden, die die Galerie in Fotos.js hat und die auch im Aufruf von Bildgross.html verwendet wird.
Hier können Sie meine Galerie in Aktion sehen: eine Beispielgalerie, ein Beispiel mit Bildunterschriften (nur die ersten beiden Bilder), ein Beispiel für einen Aufruf ohne Navigation! | |||||||||
| Bildgross.html | |||||||||
Übernimmt die Anzeige des Bildes. Der Name dieser Datei darf nicht verändert werden, denn Fotos3.js stellt daran fest,
in welcher Datei es aufgerufen wurde (das Script durchsucht die Adresszeile nach der Zeichenkette Bildgross.html). Ggf.
sollten Sie aber darin den Text formatieren (kommentierte Stellen). Der Aufruf erfolgt über folgenden Link, den Sie in einer Übersichtsseite verwenden müssen:
Es empfiehlt sich, die Übersichtsseite so zu konfigurieren, daß auch bei deaktiviertem Javascript ein Ansehen der Bilder möglich ist. Dafür muß der Aufruf in einem Javascript erfolgen und in einem Noscript-Bereich ein direkter Link zu dem Bild eingegeben werden:
Wenn Sie nun eine neue Übersichtseite erstellen möchten, dann verwenden Sie am besten die Ersetzen-Funktion im Windows-Editor und ersetzen ?0? durch ?1? (oder die jeweils aktuelle Galerienummer) und ersetzen die Bildpfade durch die neuen. Ggf. müssen Sie noch die Anzahl der Aufrufe anpassen, wenn es mehr oder weniger Bilder in der neuen Galerie gibt. Sie können mit Bildgross.html auch jedes Bild einer Galerie einzeln aufrufen ohne die Navigation anzuzeigen, indem Sie an den Link einfach ein % anhängen:
Man kann zusätzlich einen individuellen Text im Link angeben, der dann unterhalb des Bildes angezeigt wird. Leertaste (' ') ist dabei durch '&_' zu erzeugen und ein '&' bekommt man mit '&%' hin (das '&' funktioniert in Verbindung mit Sonderzeichen nämlich nicht). Eine Liste der möglichen Sonderzeichen finden Sie unter: http://de.selfhtml.org/html/referenz/zeichen.htm. Sie können auch html-Tags eingeben (z.B.<br>)! Leertasten und Umlaute sollten Sie vermeiden. Ein Beispiel für diese Funktion finden Sie in Galerie3.html! | |||||||||
| Fotos.js | |||||||||
Das ist die Datenbank der Galerien, die bei jeder neuen Galerie um die entsprechenden Daten erweitert wird. Diese Datei muß von jeder
Seite aufgerufen werden, die auf Fotos2.js oder Fotos3.js zugreifen möchte! Ganz oben muß immer die Anzahl der Galerien angegeben werden:
titel[x][0] ist die Überschrift der Galerie, wobei für x die jeweilige Galerienummer eingesetzt wird.
pfad[x][0] ist der Ordner der Fotos und der Anfangsname (bis zur laufenden Nummerierung) der jeweiligen Fotos ausgehend von dem Ordner, in dem sich Bildgross.html befindet. Die Fotos können auch auf anderen Servern liegen! Die zweistellige laufende Nummer und die Endung ".jpg" werden immer später angehängt.
Sind die Bilder nicht fortlaufend nummeriert oder will man Bilder aus verschiedenen Ordnern in eine Galerie zusammenfassen, dann kann als z die Bildnummer verwendet werden und so eine eigene komplette URL für dieses Bild definiert werden. ACHTUNG: in diesem Fall muß pfad[x][0] = ''; (das sind zwei Apostrophe hintereinander) gesetzt werden und es muß für jedes Bild dieser Galerie ein eigener Pfad definiert werden! Es wird dann auch keine laufende Nummer und keine Endung mehr angehängt!
thumbs[x] ist die URL zur Bildübersichtsseite dieser Galerie ausgehend von dem Ordner, in dem sich Bildgross.html befindet. ../ darf dabei nicht verwendet werden! Es darf auch ein absoluter Pfad (http://www...) verwendet werden, dann muß aber für jede Galerie ein absoluter Pfad verwendet werden, sonst klappen die Verweise nicht.
Anzahl[x] ist die Anzahl der Fotos dieser Galerie. Wie bereits gesagt fangen wir bei den Fotos bei Eins an zu zählen. Die maximale Anzahl pro Galerie ist 999, ich rate aber von mehr als 50 Bildern in einer Galerie ab, da das sonst unübersichtlich wird.
Hier folgt nun mal ein Beispiel für den Inhalt von Foto.js (den Teil, wo die Variablen definiert werden habe ich jetzt einmal weg gelassen):
Die zweite Galerie (Nummer 1) enthält Bildunterschriften zu allen Bildern außer dem 4ten. In der dritten Galerie werden die Bilder 23 und 02 der ersten Galerie und die Bilder 02, 04 und 05 der zweiten Galerie in eine Galerie mit 5 Bildern zusammengefaßt. Die ersten zwei Übersichtsseiten befinden sich in diesem Beispiel im gleichen Ordner wie Bildgross.html, die dritte ist im Ordner unterordner. | |||||||||
| Fotos2.js | |||||||||
Wird von Bildgross.html aufgerufen und übernimmt die Darstellung von Bild und Navigation. In dieser Datei sollten Sie nur Veränderungen vornehmen, wenn Sie wissen was Sie tun. Ggf. sollten Sie hier Formatierungen anpassen, wenn die Anpassung in Bildgross.html nicht den gewünschten Effekt erzielt. Wenn Sie dabei nur einen kleinen Fehler machen, funktioniert unter Umständen das gesamte Script nicht mehr! | |||||||||
| Fotos3.js | |||||||||
Dieses Script erzeugt die Galerieauswahl und wird sowohl auf den Übersichtsseiten als auch in Bildgross.html aufgerufen.
Es geht dabei immer davon aus, daß die in Fotos.js angegebenen Pfade für die Übersichtsseiten immer von
dem Ordner aus angegeben wurden, in dem sich Bildgross.html befindet. In dieser Datei sollten Sie nichts verändern. Formatierungen können vor dem Aufruf des Scriptes erfolgen. | |||||||||
