Logo

Eigene Homepage

Wie man Bilder auch noch zeigen kann


"Quer, gedreht, gestreift, teilweise, zu groß, in falschen Farben, ....?"

Nein, ganz und gar nicht, die Bilder sollen schon so bleiben, wie sie sind. Aber bisher hatten wir die Bilder immer so auf der Seite, wie sie zu sehen sein sollten, also in genau der Größe. Das ist dann schwierig, wenn ich viele Fotos zeigen will, denn dann wird die eigentliche Seite sehr lang und das Laden dauert länger. Wie durch Zufall habe ich gerade eine Abhilfe gefunden. Klick doch mal ...

Dies sind die Bilder, die ich Dir immer schon mal zeigen wollte:

Weitewelt Berlin Paradies Madagascar Melbourne
Paradies Morgenland Nordpol Süden Westen

Gefällt Dir diese Art, Bilder zu zeigen? Das kannst Du auch! Besuche die Seite Clearbox und lade Dir das Clearbox.zip-Paket herunter. Anschließend entpackst Du es in Deinen Arbeitsordner für die Homepage. Wenn das richtig gelaufen ist, dann hast Du in dem Hauptordner:

Damit das arbeitet, muss in den Kopf der HTML-Seite, die die Bilder zeigen soll, ein Link eingefügt werden, am Besten unter dem Link zur CSS-Datei. Der Link lautet:

<script src="clearbox.js" type="text/javascript"></script>

Wenn Du eine Bild mit einem normalen Link versiehst, dann sieht das so aus:

<a href="Bilder/Bild.jpg" title="Text"><img src="Bilder/Bild-klein.jpg"></a>

Wenn dieses Bild auf diese neue Art gezeigt werden soll, dann muss die Zeile wie folgt geändert werden:

<a href="Bilder/Bild.jpg" rel="clearbox" title="Text"><img src="Bilder/Bild-klein.jpg"></a>

Wenn nun mehrere Bilder ein Diashow ergeben sollen, dann müssen entsprechend viele kleine Bilder mit den Links zu den großen Bildern im Quelltext der Seite stehen und jeder Link muss jetzt so aussehen:

<a href="Bilder/Bild.jpg" rel="clearbox[Diashowname]" title="Text"><img src="Bilder/Bild-klein.jpg"></a>

Alle Bilder, bei denen im Link der "Diashowname" gleich sind, gehören zu einer Diashow. Bei mir sind das jeweils die oberen 5 Bilder und die unteren. Wenn Du die großen Bilder siehst, dann kannst Du ganz links unten den Namen erkennen, den ich den beiden Bilderserien anstelle von "Diashowname" gegeben habe:

Wenn Du auf diese Weise eine Diashow erzeugt hast, dann erhält das Anzeigefenster auch die passenden Knöpfe für "Diashow starten", "vor", zurück" usw. Es gibt von mir noch 2 nützliche Tipps: öffne die Datei "clearbox.js" und suche die Zeile "var CB_Language=". Ändere den Wert von "en" nach "de". Speichere sie ab. Öffne die Datei "/clearbox/language/de" und ändere die Zeichenkodierung (im Menü des Editors vorhanden) von "UTF-8" auf "Westeuropäisch/8859-1", aber natürlich nur, wenn Deine Homepage in dem Zeichensatz verfasst ist. Du merkst den Fehler, wenn Du in einer Diashow oben den Schriftzug "zurück" nur kryptisch lesen kannst.

Es gibt noch eine Datei "/clearbox/config/default", in der viele Dinge stehen, die man ändern kann, so z.B. Farben oder die Durchsichtigkeit oder Anzeige von Knöpfen oder ... Viel Spaß beim Basteln!

Hier ein Test, was Clearbox auch kann

Clearbox kann auch Musik abspielen

und Youtube-Videos abspielen

Mein Gästebuch



Zurück zur Kartenseite<------> Weiter zur Dia-Überblendung

Feedback Mein Gästebuch nach oben