(Bildergalerie) warum klappt das Script beim ersten Klick nicht?

[Antilles]

Hallo Leute,
ich habe da ein Script, dass fast perfekt läuft. Einziger Haken: das erste Umschalten der Galerie-Bilder klappt nicht. Wenn Bild 1 angezeigt wird und man auf die Schaltflächen für Bild vor oder Bild zurück klickt, passiert gar nichts. Erst beim zweiten Klick reagiert die Seite, aber dann wird Bild 2 (bei Bild vor) bzw. das letzte Bild (bei Bild zurück) übersprungen. Danach funktioniert alles wieder perfekt. Dann werden beim Blättern auch Bild 2 und das letzte Bild gezeigt.

Von der HTML-Seite werden die Variablen anzahl (Anzahl der Bilder in der Galerie) und gal_name (Galerie-Name für das Zusammensetzen des src-Pfades) an die Steuerlogik übergeben.

Hier die Steuerlogik:

var counter = 1;

	
$(document).ready(function(){

	var images = $(".slideshow img");
	images.parent().addClass("loading");
	images.hide();
	images.imagesLoaded(function(){
		$('#gal_bild').fadeIn(1000);								 
 	});
	images.parent().removeClass("loading");
	$('#vor_btn').click(nextpic);
	$('#back_btn').click(prevpic);
});

function nextpic() {
	counter = counter + 1;
	$("#vor_btn").click(function(){
	$('#gal_bild').fadeOut('slow', function() {
		if(counter>anzahl){
			counter = 1;
		}
		bildload = "grafics/gal_" + gal_name + "/" + gal_name + "_" + counter + ".jpg";		
		$("#gal_bild").attr("src", bildload);
		$('#gal_bild').fadeIn('slow');
	});
});	
}

function prevpic() {
	counter--;
	$("#back_btn").click(function(){
	$('#gal_bild').fadeOut('slow', function() {
		if(counter == 0){
			counter = anzahl;
		}
		bildload = "grafics/gal_" + gal_name + "/" + gal_name + "_" + counter + ".jpg";		
		$("#gal_bild").attr("src", bildload);
		$('#gal_bild').fadeIn('slow');
	});
});	

}

 

[kkapsner]

In den Funktionen next- und prevpic registrierst du erst die Eventlistener, die dann auch das Bild anzeigen... und bei jedem Klick registrierst du einen zusätzlichen Eventlistener. Das wird den Browser also immer mehr belasten...

PS: Globale Variablen, besonders solche mit so häufig verwendeten Namen wie "counter", sind eine extrem schlechte Idee. Warum packst du die Variablen- und Funktionsdefinition nicht mit in das document.ready mit rein?
PPS: Dir ist hoffentlich klar, dass die CSS-Klasse "loading" niemals angezeigt wird...

 

[Antilles]

Hallo kkapsner,

schreibt doch bitte auf, wie du das umsetzen würdest. Und wenn du dann auch noch mein eigentliches Anliegen beantworten könntest, wäre ich unendlich dankbar. Warum passiert beim ersten Klick nichts und wie ändere ich das?

 

[kkapsner]

$(document).ready(function(){
	var counter = 1;
	
	var images = $(".slideshow img");
	images.parent().addClass("loading");
	images.hide();
	images.imagesLoaded(function(){
		$('#gal_bild').fadeIn(1000);
		images.parent().removeClass("loading");
	});
	function nextpic(){
		counter += 1;
		if (counter > anzahl) {
			counter = 1;
		}
		loadNewPic();
	}
	function prevpic(){
		counter -= 1;
		if (counter <= 0) {
			counter = anzahl;
		}
		loadNewPic();
	}
	function loadNewPic(){
		$('#gal_bild').fadeOut('slow', function(){
			bildload = "grafics/gal_" + gal_name + "/" + gal_name + "_" + counter + ".jpg";
			$("#gal_bild").attr("src", bildload).fadeIn('slow');
		});
	}
	$('#vor_btn').click(nextpic);
	$('#back_btn').click(prevpic);
});

- ungetestet... wobei der Code so noch nicht funktionieren kann, da die Variable anzahl nicht definiert ist.

 

[Antilles]

Sehr geil, vielen Dank. Durch diese Optimierung ist der eigentliche Fehler verschwunden. Jetzt funktioniert das Script sofort beim ersten Klick.

 

[kkapsner]

Das war keine reine Optimierung... hatte die Lösung des Problems schon im Sinn.

vielen Dank

Bitte - gern geschehen.

 

[Antilles]

eine Sache wäre da noch. im praxistest hat sich ergeben, dass bei langsamen internetverbindungen das neue bild nicht schnell genug geladen wird. der fade in wird vollzogen, noch ehe das neue bild geladen ist. das neue bild wird dann verspätet schlagartig angezeigt. das sieht natürlich nicht so gut aus. lässt sich die folge der befehle so ändern, dass der fade in erst dann durchgeführt wird, wenn das bild vollständig geladen ist?

 

[kkapsner]

Du müsstest das Bild schon laden, wenn das alte Bild noch ausgeblendet wird:

	function loadNewPic(){
		var img = $('#gal_bild');
		var bildload = "grafics/gal_" + gal_name + "/" + gal_name + "_" + counter + ".jpg";
		var loaded = false;
		var animationFinished = false;
		var preload = new Image();
		preload.onload = function(){
			loaded = true;
			if (animationFinished){
				img.attr("src", bildload).fadeIn('slow');
			}
		}
		preload.src = bildload;
		img.fadeOut('slow', function(){
			animationFinished = true;
			if (loaded){
				img.attr("src", bildload).fadeIn('slow');
			}
		});
	}