Javascript verändert Bilder nicht und bricht ab

[Ganymen]

Hallo,

ich habe ein Problem mit zwei Funktionen in meiner Homepage. Ich versuche Bilder zu zentrieren. Ich habe ein rechteckigen Rahmen in welchem die Bilder immer in der Mitte angezeigt werden sollen. Immer wenn er von einem Querbild in ein Hochkantbild wechselt oder auch umgekehrt, stimmen die Abstände nicht. Hier wird vielmehr auf der alten Position oder ähnlichem aufgesetzt. Wenn ich jedoch im Debug-Modus bin wird alles korrekt berechnet und angezeigt. Manchmal jedoch fliegt er einfach raus und ich kann nicht mehr mit Firebug debuggen was dann auch zum Verschieben kommt.

Hat einer eine Ahnung? Folgend mein Code

Vielen Dank
Rüdiger

[LX]

Hallo, Rüdiger!

Wenn Du nach "Folgend mein Code" auch noch den Code geposted hättest, hätten wir Dir vielleicht weiterhelfen können. So orakelt meine Kristallkugel etwas von ungewollter Rekursion (eine Verschiebung führt zu einem Resize, die wieder zu einer Verschiebung führt) - aber es kann auch an etwas ganz anderem liegen.

Gruß, LX

[ganymen]

Hier der Code

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)  
	}  
}

[LX]

Ich möchte mich schon mal im Voraus entschuldigen, da meine Postings inzwischen für Dich wie Zurechtweisungen klingen müssen, was nicht meine Absicht ist - aber der Code, den Du uns hier geschickt hast, ist komplett aus dem Kontext gerissen, in dem man ihn sinnvoll testen könnte.

Da wäre etwa das Array "Photos", welches möglicherweise nicht ausreichend befüllt ist. Der nächste Punkt besteht darin, dass Du bei dem offenbar eingebundenen Bild img.width nimmst und nicht img.originalWidth (sofern vorhanden), was auch zu Problemen führen könnte.

Außerdem hast Du geschrieben, wird diese Funktion in einem resize-Event aufgerufen - obwohl sie das Potential hat, ein weiteres resize-Event auszulösen, was immer vermieden werden sollte (oder Du setzt eine Sperre, die erst nach einem Timeout aufgehoben wird und verhindern soll, dass sich eine Schleife bildet).

Gruß, LX

[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);
}

[LX]

Hallo!

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

Das ist schon möglich, doch eine Funktion ist wesentlich leichter im Kontext zu betrachten, vor allem, wenn sie Daten von ausserhalb verwendet.

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

Bevor ich den ganzen Code durcharbeite, noch die Frage, worauf Dein Empfinden beruht? Hast Du eine Fehlermeldung in der JS-Fehlerkonsole Deines Browsers (die auch dann funktioniert, wenn Firebug ausgestiegen ist, einfach mal vorher Strg-Shift-J drücken)?

Dass es beim Debuggen funktioniert, klingt für mich nach einem Timing-Problem, so dass bspw. noch alte Werte in den Variablen stecken. Hast Du bspw. schon versucht, zu verhindern, dass die Funktion gleichzeitig doppelt ausgeführt wird?

Gruß, LX