Blättern in Fotoalbum UND individuelle Foto-Auswahl

[molily]

/* Objekt-Container (Object-Literal) */  
var galerie = {  
	/* Konfiguration */  
	  
	/* ID der Liste */  
	thumbnailListenId : "thumbliste",  
	  
	/* ID des Vollbildes */  
	vollbildId : "aktuelles_foto", // entsprechende ID musst du vergeben, derzeit ist hat es nur einen Namen  
	  
	/* Anfangs ist das erste Bild zu sehen */  
	aktuellesBildIndex : 0,  
	  
	/* Startfunktion */  
	start : function () {  
		// Führe Init-Funktion beim fertigen Laden aus.  
		// Hier wird nicht einfach mit window.onload gearbeitet, damit noch weitere  
		// Scripte window.onload für ihre Initialisierung nutzen können.  
		if (document.addEventListener) {  
			// Für standardkonforme Browser  
			document.addEventListener("load", galerie.init, false);  
			// Arbeite mit dem DOMContentLoaded-Event, der schon vor dem load-Event passiert,  
			// sobald der DOM-Zugriff auf alle Elemente möglich ist  
			document.addEventListener("DOMContentLoaded", galerie.init, false);  
			// Mit DOMContentLoaded kann das Script schon früh initialisiert werden.  
			// Dadurch ist die Thumbnail-Liste schon dann bedienbar, wenn noch nicht  
			// alle Bilder geladen sind.  
			// Hier werden zwei Handler registriert (load und DOMContentLoaded),  
			// aber die Initialisierung soll natürlich nur einmal ausgeführt werden.  
			// Wenn der Browser beide Events kennt, fragt die Init-Funktion ab,  
			// ob sie schon einmal aufgerufen wurde.  
		} else if (window.attachEvent) {  
			// IE-Alternative  
			window.attachEvent("onload", galerie.init);  
		}  
		  
		// Das ganze oben musst du nicht verstehen, es ist nur praktischer.  
		// Du könntest auch weiterhin das einfache  
		//    window.onload = galerie.init;  
		// verwenden.  
	},  
	  
	/* Initialisierung */  
	init : function () {  
		  
		// Wurde die galerie schon initialisiert? Dann breche ab.  
		if (galerie.initialisiert) {  
			return;  
		}  
		  
		// Speichere eine Referenz auf Vollbild (vereinfacht den späteren Zugriff)  
		galerie.vollbild = document.getElementById(galerie.vollbildId);  
		  
		// Hole alle Links in der Thumbnail-Liste  
		var thumbnailListe = document.getElementById(galerie.thumbnailListenId);  
		var linkListe = thumbnailListe.getElementsByTagName("a");  
		  
		// Speichere die Elementliste  
		galerie.linkListe = linkListe;  
		  
		// Speichere Anzahl der Bilder  
		galerie.bilderAnzahl = linkListe.length;  
		  
		// Durchlaufe die Elementliste  
		for (var i = 0, link; link = linkListe[i]; i++) {  
			// Speichere galerieIndex am Link  
			link.galerieIndex = i;  
			// Vergebe Event-Handler  
			link.onclick = galerie.thumbnailKlick;  
		}  
		  
		// Füge Blätternavigation dynamisch ins Dokument ein  
		// Erzeuge ein ul-Element  
		var blätterNavigation = document.createElement("ul");  
		blätterNavigation.id = "blaettern";  
		// Fülle die Liste über innerHTML  
		blätterNavigation.innerHTML =  
			"<li onclick='galerie.erstesBild()'>&lt;&lt;</li>" +  
			"<li onclick='galerie.vorherigesBild()'>&lt;</li>" +  
			"<li onclick='galerie.nächstesBild()'>&gt;</li>" +  
			"<li onclick='galerie.letztesBild()'>&gt;&gt;</li>";  
		// Hänge die Navigation nach der Thubmnail-Liste ins Dokument ein  
		thumbnailListe.parentNode.insertBefore(blätterNavigation, thumbnailListe.nextSibling);  
		  
		// Initialisierung fertig.  
		// Setze »Bereits initialisiert«-Flag  
		galerie.initialisiert = true;  
		  
	},  
	  
	/* Event-Handler, der beim Klick auf ein Thumbnail ausgeführt wird */  
	thumbnailKlick : function () {  
		// Setze neue Bildadresse  
		galerie.vollbild.src = this.href;  
		  
		// Speichere aktuelle Position  
		galerie.aktuellesBildIndex = this.galerieIndex;  
		  
		// Unterdrücke Standardaktion  
		return false;  
	},  
	  
	/* Blätterfunktionen */  
	  
	/* Helferfunktion zum Zeigen eines Bildes mit der aktuell gesetzten Nummer */  
	zeigeBild : function () {  
		// Schaue in der Linkliste nach dem Link mit dem aktuellen Bild-Index  
		// und verwende desse href-Attribut für das Vollbild  
		galerie.vollbild.src = galerie.linkListe[galerie.aktuellesBildIndex].href;  
	},  
	  
	nächstesBild : function () {  
		if (galerie.aktuellesBildIndex < galerie.bilderAnzahl) {  
			galerie.aktuellesBildIndex++;  
			galerie.zeigeBild();  
		}  
	},  
		  
	vorherigesBild : function () {  
		if (galerie.aktuellesBildIndex > 0) {  
			galerie.aktuellesBildIndex--;  
			galerie.zeigeBild();  
		}  
	},  
		  
	erstesBild : function () {  
		galerie.aktuellesBildIndex = 0;  
		galerie.zeigeBild();  
	},  
		  
	letztesBild : function () {  
		galerie.aktuellesBildIndex = galerie.bilderAnzahl - 1;  
		galerie.zeigeBild();  
	}  
};  
  
// Rufe Startfunktion auf  
galerie.start();

Auch hier erfolgt die Initialisierung automatisch, du musst im HTML-Code keine Event-Handler unterbringen, nur die nötigen IDs zum Ansprechen der Elemente.
Außerdem würde ich die Blätter-Navigation mit JavaScript einfügen, da sie ohnehin nur mit JavaScript funktioniert und nicht direkt im HTML-Quelltext liegen sollte, wenn sie keine Funktionalität hat.

Mathias