Javascript verändert Bilder nicht und bricht ab

[ganymen]

Sorry, dachte das liegt nur an der einen Funktion, da Sie in meinen Augen mehr oder weniger unabhängig ist

Hier der ganze Code, wobei die Funktionen grosses_bild_auffrischen und thumbnails_auffrischen nach meinem Empfinden die Fehler schmeißen.

Vielen Dank für die Hilfe

/
var Photos  = new Array();

var anzahl_bilder;
function start(){
var thumb_groesse = 100; // x und y Ausdehnung der Thumbnails (zum Ausrichten)
	// Anzahl der Thumbnails, die erzeugt werden sollen
	var anzahl_thumbnails = 5;
	var thumbnail_string = "Bilder %index_erster% bis %index_letzter% von %anzahl_bilder%";

	var bild_beschriftung = "Bild %index_gross% / %anzahl_bilder%: %beschreibung%";

	var pfad_zu_navbildern = "./nav";

	bild_paket (1);
	// intern genutzte Variablen (keine Anpassung noetig)
	var index_erstes_bild = 0; // erstes Bild in der Liste (zur Initialisierung)
	var index_grosses_bild = 0; // Bildindex fuer anzuzeigendes grosses Bild

	// Anzahl der Thumbnails darf hoechstens so gross sein, wie die Gesamtzahl der Bilder
	if (anzahl_thumbnails > anzahl_bilder)
		anzahl_thumbnails = anzahl_bilder;
	erzeuge_thumbnails ();
	thumbnails_auffrischen ();

	grosses_bild_anzeigen (1);
}
function bild_paket (paketID) {
	
	switch (paketID) {
		// Album nummer 1
		case 1:
			// nur Bild Untertitel und Titel wenn man Maus drauf hat
			// addPhoto ("images/Hochzeit/File_002_t.jpg","","tester","testen");
			addPhoto ("images/Hochzeit/037_best_t.jpg");
			addPhoto ("images/Hochzeit/041_best_t.jpg");
			addPhoto ("images/Hochzeit/048_bestSW_t.jpg");
			addPhoto ("images/Hochzeit/048_best_t.jpg");
			addPhoto ("images/Hochzeit/IMG_8171_t.JPG");
			addPhoto ("images/Hochzeit/IMG_8226sw1_t.JPG");
			addPhoto ("images/Hochzeit/IMG_8296w_t.JPG");
			addPhoto ("images/Hochzeit/IMG_8298_t.JPG");
			addPhoto ("images/Hochzeit/IMG_8303_t.JPG");
			addPhoto ("images/Hochzeit/IMG_8418_t.jpg");


			break;
		// Album nummer 2
		
}
	anzahl_bilder = Photos.length; // Anzahl der Bilder insgesamt

}


function addPhoto (thumbnail, bild, alt, beschreibung) {
	Photos[Photos.length] = new Object();
	// URL des Thumbnail
	Photos[Photos.length - 1]['datei'] = thumbnail;
	// URL des Bildes
	if (!bild)
		bild = thumbnail.replace(/_t/, "");
	Photos[Photos.length - 1]['datei_gross'] = bild;
	// Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
	Photos[Photos.length - 1]["alt"] = alt;
	// Kurze Bildbeschreibung zum jeweiligen Bild
	Photos[Photos.length - 1]['beschreibung'] = beschreibung;
}

// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.
function zaehle_thumbnails () {
	var tn = 0;

	for (i = 0; i < document.images.length; i++)
		if ((document.images[i].id).match (/^klein[0-9]+$/))
			tn++;
	return tn;
}

// Thumbnails automatisch erzeugen, um Fehler zu vermeiden
function erzeuge_thumbnails () {
	for (i = 0; i < anzahl_thumbnails; i++) {
		eintrag = document.createElement ("li");
		eintrag.id="klein_li" + (i + 1);
		link = document.createElement ("a");
		link.href = "javascript:grosses_bild_anzeigen (" + (i + 1) + ")";
		bild = document.createElement ("img");
		bild.border = "0";
		bild.id = "klein" + (i + 1);
		bild.className = ""

		link.appendChild (bild);
		eintrag.appendChild (link);

		document.getElementById ("thumbs").appendChild (eintrag);
	}
}

// Thumbnails auf Groesse 'thumb_groesse' ausrichten
function ausrichten () {
	for (i = 0; i < anzahl_thumbnails; i++) {
		// Thumbnails vertikal ausrichten
		document.getElementById ('klein' + (i + 1)).vspace = (thumb_groesse - document.getElementById ('klein' + (i + 1)).height) / 2;
		// Thumbnails horizontal ausrichten
		document.getElementById ('klein' + (i + 1)).hspace = (thumb_groesse - document.getElementById ('klein' + (i + 1)).width) / 2;
	}

}



// Thumbnails gemaess aktuellem index_erstes_bild anzeigen
function thumbnails_auffrischen () {
	try{
	// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..b3) auffrischen
	for (i = 0; i < anzahl_thumbnails; i++) {
		var myelement = document.getElementById('klein' + (i + 1));
		// Bild austauschen
		document.getElementById ('klein' + (i + 1)).src = Photos[index_erstes_bild + i]['datei'];
		// Alt-Text austauschen
		document.getElementById ('klein' + (i + 1)).alt = Photos[index_erstes_bild + i]['alt'];
		// Title-Text austauschen
		if (Photos[index_erstes_bild + i]["alt"])
				document.getElementById ('klein' + (i + 1)).title = Photos[index_erstes_bild + i]['alt'];
			
		groesse_anpassen('klein' + (i + 1));
	}

	if (index_erstes_bild > 0)
		document.getElementById('previous').style.visibility = "visible";
	else
		document.getElementById('previous').style.visibility = "hidden";

	if (index_erstes_bild+anzahl_thumbnails < anzahl_bilder)
		document.getElementById('next').style.visibility = "visible";
	else
		document.getElementById('next').style.visibility = "hidden";

 	}
	catch(e){
 		alert('An error has occurred: '+e.message)
	}
}

function groesse_anpassen(elementID) {
	var groesse_box = document.getElementById('thumbbox').clientHeight;
	// Werte bei 640*480 Bild auf 100 runtergebrochen
	var mar_left = 20;
	var mar_right = 5;
	var mar_top = 20;
	var myelement = document.getElementById(elementID);
	var hoehe_element = myelement.naturalHeight;
	var breite_element = myelement.naturalWidth;
	var seiten_verhaeltnis = hoehe_element / breite_element;
	if (breite_element >= hoehe_element) {
		myelement.width = 100;
		var neue_hoehe = 100 * seiten_verhaeltnis
		myelement.height = neue_hoehe ;
		var abstand_oben = groesse_box - neue_hoehe;
		myelement.style.marginTop = (Math.round(abstand_oben /2 ))+"px";;
	} else {
		myelement.height = 100;
		neue_breite = 100 / seiten_verhaeltnis
		myelement.width =  neue_breite;
		var abstand = 100 - neue_breite;;
		myelement.style.marginLeft = (Math.round(abstand /2 )+ mar_left)+"px";
		myelement.style.marginRight = (Math.round(abstand /2 )+ mar_right)+"px";
	}
}

function delete_att(){
	for (i = 0; i < anzahl_thumbnails; i++) {
		document.getElementById ('klein' + (i + 1)).removeAttribute("width");
		document.getElementById ('klein' + (i + 1)).removeAttribute("height");
		
		document.getElementById ('klein' + (i + 1)).style.marginTop =""	;
		
		document.getElementById ('klein' + (i + 1)).style.marginLeft = "";
		document.getElementById ('klein' + (i + 1)).style.marginRight="";
	}	
}

// Thumbnails um 'anzahl_thumbnails' zurueckblaettern
function pgup () {
	
	if (index_erstes_bild - anzahl_thumbnails > 0)
		index_erstes_bild = index_erstes_bild - anzahl_thumbnails;
	else
		index_erstes_bild = 0;
	
	delete_att();
	thumbnails_auffrischen ();
}

// folgende 'anzahl_thumbnails' Thumbnails anzeigen
function pgdown () {
	try{
	   if (index_erstes_bild + 2 * anzahl_thumbnails < anzahl_bilder)
		index_erstes_bild = index_erstes_bild + anzahl_thumbnails;
	
	else
		index_erstes_bild = anzahl_bilder - anzahl_thumbnails;
	//alte Elemente löschen
	delete_att();
	
	thumbnails_auffrischen ();
	}
	catch(e){
 		alert('An error has occurred: '+e.message)
	}
}

// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (i) {
	index_grosses_bild = index_erstes_bild + i - 1;
	
	grosses_bild_auffrischen ();
}


function grosses_bild_auffrischen () {
	try{
	//löschen margin in Tag zur neuen Ausrichtung
	var myelement = document.getElementById('gross');
	var alt_text = Photos[index_grosses_bild]['alt'];
	myelement.style.marginLeft = "";
	myelement.style.marginTop = "";
	
	// URL des Bildes setzen
	myelement.src = Photos[index_grosses_bild]['datei_gross'];
	// Alt-Text des Bildes setzen
	
	
	// Title-Text des Bildes setzen
	if (alt_text) {
	    myelement.alt = alt_text;
		myelement.title = alt_text;
	}
	else 			
	 	myelement.removeAttribute("title");
	var myparent = document.getElementById('grosscontainer')
	var abstand_links = (myparent.clientWidth - myelement.width) /2;
	var abstand_oben = (myparent.clientHeight - myelement.height) /2;
	myelement.style.marginLeft = Math.round(abstand_links)+"px";
	myelement.style.marginTop = Math.round(abstand_oben)+"px";

	//myelementgross.style.width = 500 +"px";
	// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
	// damit die Beschriftungsdaten darin gespeichert werden koennen
	if (!document.getElementById ('beschriftung').firstChild)
		document.getElementById ('beschriftung').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen

	if (Photos[index_grosses_bild]["beschreibung"]) {
		tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
		tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
		tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]['beschreibung']);
		// Beschriftung des Bildes im zugehoerigen P-Tag setzen
		document.getElementById ('beschriftung').firstChild.data = tstr;
	}
	else
	{
		document.getElementById ("beschriftung").firstChild.data = "";	
	}
	
	
	if (index_grosses_bild > 0)
		document.getElementById('gross_links').style.visibility = "visible";
	else
		document.getElementById('gross_links').style.visibility = "hidden";

	if (index_grosses_bild +1 < anzahl_bilder) //index_grosses_bild startet bei 0
		document.getElementById('gross_rechts').style.visibility = "visible";
	else
		document.getElementById('gross_rechts').style.visibility = "hidden";
	myelement = "";
	abstand_links ="";
	abstand_oben="";
	
	}
	catch(e){
 		alert('An error has occurred: '+e.message)
	}
}

function zurueck_gross ()
{
	if (index_grosses_bild > 0)
	{
		// zum vorherigen Bild
		index_grosses_bild--;
		grosses_bild_auffrischen ();;
	}
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
	// nur wenn nicht schon beim letzten Bild angekommen
	if (index_grosses_bild + 1 < anzahl_bilder)
	{
		// zum naechsten Bild
		index_grosses_bild++;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen ();
	}
}

function change_gallery(gallerieID){
	// Array Photos leeren
	Photos =[];
	
	// alle Vorschaubilder löschen in thumbbox, da neues Album
 	var label=document.getElementById("thumbs");	
  	while( label.hasChildNodes() ) { label.removeChild( label.lastChild ); }

	bild_paket (gallerieID);
	// intern genutzte Variablen (keine Anpassung noetig)
	index_erstes_bild = 0; // erstes Bild in der Liste
	index_grosses_bild = 0; // Bildindex fuer anzuzeigendes grosses Bild

	if (anzahl_thumbnails > anzahl_bilder)
		anzahl_thumbnails = anzahl_bilder;

	erzeuge_thumbnails ();

	thumbnails_auffrischen ();
	grosses_bild_anzeigen (1);
}