molily: Galerie mit javascript

Beitrag lesen

Hallo,

Anscheinend mangelt es an einem Grundverständnis von JavaScript... JavaScript ist kein HTML-Präprozessor, ein JavaScript-Interpreter generiert keinen HTML-Quellcode. JavaScript kann das zwar bis zu einem gewissen Punkt, aber das ist die Ausnahme statt die Regel.

JavaScript tritt bestenfalls von »außen« an ein bestehendes HTML-Dokument heran, während es im Browser angezeigt wird. Da solltest dich gleich an »Unobtrusive JavaScript« gewöhnen, das heißt, dass die Seite auch ohne JavaScript vollständig funktioniert.

Man startet erst einmal mit einer HTML-Struktur, bei der möglichst alle Inhalte zugänglich sind. Bei einer Galerie hat man i.d.R. eine Liste mit Bildern.

<ol>
<li><img ....></li>
...
</ol>

JavaScript schaltet sich dann beim Laden des Dokuments hinzu und modifiziert das HTML gegebenenfalls. Das Script sorgt dann dafür, dass erstmal vier Bilder zu sehen sind und fügt Navigationslinks ein.

Die grafische Anordnung übernimmt dabei, wie es auch sonst immer sein sollte, CSS. Das heißt, Layouttabellen usw. sind ungeeignet, weil JavaScript dann nicht einfach mit CSS alles umgestalten kann.

Gut, nochmal rekapitulieren:

1. Eine einfache Liste mit allen Bildern.
2. Ein Script, dass sich automatisch beim Laden der Seite startet. (onload ist nicht ganz so super, weil dann auf die Bilder gewartet wird, bevor das Script startet. Da gibts bessere Lösungen, die allerdings komplizierter sind.)
3. Es blendet erstmal alle Bilder (li-Elemente) außer die ersten vier aus.
4. Es fügt Zurück- und Vorwärts-Links ins Dokument ein, bei deren Aktivierung Funktionen aufgerufen werden, die die gegenwärtigen vier li-Elemente verstecken und die vier nächsten bzw. vorigen zeigen.

Die Umsetzung mag für dich momentan vielleicht unmöglich sein. Es gibt sicher viele einfachere Lösungen, die HTML und JavaScript nicht trennen und insofern auch nicht »unobtrusive« sind. Aber wenn du etwas mehr mit JavaScript vorhast, solltest du dich langsam an diesen Stil gewöhnen, den ich hier beispielhaft im Konzept geschildert habe.

Mathias