Der Austauschstudent bloggt: Aufgabe 3

Dezember 2010
Mo	Di	Mi	Do	Fr	Sa	So
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31
November

Interaktive Medien Aufgabe 3

viktor.nekvapil.uni-linz, 7. Dezember 2010, 21:34

In meiner Webseite beschäftige ich mich mit Fotos aus Linz, die ich während meinem Aufenthalt hier in Linz gemacht habe. Zuerst sind aber einige Informationen über mich zu finden.

Was die technischen Aspekten anbelangt, habe ich wie verlangt HTML und CSS benutzt. Um die Seite in der Mitte des Bildschirm zu platzieren, habe ich sie in <div id="obal"> container lokalisiert und diesem container im CSS folgende Eigenschaften zugeordnet:

#obal {
width:850px;
margin:0 auto;}

Um die Tage zu zählen, die von der erstellen der Fotos abgelaufen sind, habe ich JavaScript angewendet. JavaScript ist im Einsatz auch beim Lightbox, der ich in folgende Kapitel betrachte.

Lightbox

Lightbox ist ein open source JavaScript basierende Script, der ermöglicht, sich die Fotos in einer Webseite anzuschauen. Siehe Bilder in meiner Webseite um sich eine genauere Vorstellung zu machen.
Die Frage ist: Warum sollte man Lightbox benutzen, wenn man die Bilder einfach direkt in einer Seite unterbringen kann? Die Antwort ist leicht. Wenn man viele große Bilder in einer Webseite hätte, dann würde es stundenlang dauern, bis sie geloadet wäre. Lightbox ermöglicht, nur kleine Ansichtsbilder in der Seite zu haben und erst bei Bedarf diese in voller Größe zu präsentieren.

Wie kann man Lightbox in einer eigenen Webseite einsetzen?

1. Notwendige Dateien hier downloaden

2. In einem Wurzelverzeichnis des Webs extrahieren.

(Im Verzeichnis, wo sich die Seite befindet)

Es handelt sich um folgende Verzeichnisse:

images: hier werden Bilder gespeichert, die Lightbox für sich selbst braucht.
Js: hier befinden sich die Scripts, die für den Programmablauf verantwortlich sind
Css: hier befindet sich die css-Datei, die für Präsentation verantwortlich ist

3. Folgende Verweise auf die Scripts und css-Datei in die <head> der Webseite hinzufügen

4. Lightbox aktivieren

Nehmen wir folgendes Beispiel. Wir haben ein kleines Bild, der in der Seite eingebaut ist (Pfade: images/thumb-DSCN1118.jpg) und ein großes, der mit dem lightbox zu präsentieren ist (Pfade: images/DSCN1118.jpg).

<img>... Verweis auf das kleine Bild
href … Pfade zum großen Bild
rel … verweis darauf, dass dieses großen Bild von lightbox präsentiert wird
[plesching] … dieses großen Bild gehört zur lightbox Gruppe „Plesching“
title … ein Kommentar, der unter dem Bild erscheint

Man kann mehrere Bilder in einer Gruppe einspeichern. Diese kann man sich dann auf einmal in einem Lightbox Fenster anschauen (wie in meiner Seite dargestellt).

Code Beispiel (aus meiner Seite):

Die Tatsache, dass die Bilder einer Gruppe ("plesching") zugeordnet sind, ermöglicht, dass man sich durch alle Bilder mit dem Tasten PREV und NEXT bewegen kann.