• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bilder in ein Div laden

N

Nalia

New member
Guten Abend,
ich habe ein Problem mit meiner Ladefunktion einer Bildergalerie.
Ein Klick auf ein Thumbnail soll eine Reihe von Bildern nacheinander in ein Div laden. Die Bilder werden vorher per JSON abgerufen.
Dies ist meine Funktion:

Code: 
    function showGalery() {
        $.getJSON('json.php?trigger=4&nr=2', function(pics) {
            for (var i=0;i<pics.length;i++) {
            var bild = pics[i];
                setTimeout(function() {
                    $('#bigpic').attr('src','pics/club/g2/'+bild);
                },2000);
            }
        })
    }

Angezeigt wird mir aber immer nur das letzte Bild des gesamten Arrays. Was mache ich da falsch?
LG
Nalia
 
Ich hab das jetzt so geändert:

Code: 
function showGalery() {
        $.getJSON('json.php?trigger=4&nr=2', function(pics) {
            for (var i=0;i<pics.length;i++) {
            var bild = pics[i];
                setTimeout(function() {
                    $('#bigpic').attr('src','pics/club/g2/'+bild);
                },i*2000);
            }
        })
    }
Es sind ca. 20 Bilder im Array. Da müsste man doch mal wenigstens ansatzweise auch die anderen davor sehen. Aber ich bekomme nach wie vor nur das letzte Bild im Array angezeigt.
 
Anscheinend wird der Ausdruck 'pics/club/g2/'+bild erst nach Timeout, wenn die Funktion ausgeführt wird, ausgewertet. Probiers mal so:
Code: 
$.getJSON('json.php?trigger=4&nr=2', function(pics) {
            var i = 0;
            function showPic() {
                 $('#bigpic').attr('src','pics/club/g2/'+pics[i]);
                 i++;
                 if (i < pics.length) setTimeout(showPic, 2000);
            }
            showPic();
        })
 
Jetzt beim Testen hat sich noch ein anderes Problem aufgetan:
Galerie 1 läuft super (sogar mit fadeIn...). Wenn ich allerdings mittendrin eine andere Galerie aufrufen will, vermischen sich die Bilder aus beiden aufgerufenen Funktionen. Ich müsste also die laufende Funktion unterbrechen, den Container womöglich leeren und dann die Funktion mit den neuen Daten erneut aufrufen.
Ich habe es probiert mit
$('#bigpic').finish();
showGalery().stop();

Beides brachte keine erkennbaren Resultate. Wie kann ich die Funktion stoppen, sobald eine zweite Galerie aufgerufen wird?
LG
 
Probiers's mal so:
Code: 
var timer = null;
function showGalery() {
    $.getJSON('json.php?trigger=4&nr=2', function(pics) {
            if (timer) clearTimeout(timer);
            var i = 0;
            function showPic() {
                 $('#bigpic').attr('src','pics/club/g2/'+pics[i]);
                 i++;
                 if (i < pics.length) timer = setTimeout(showPic, 2000);
            }
            showPic();
        })
    }
 
Zuletzt bearbeitet:
Ist jetzt zwar kein Kommentar, der dir bei deinem Problem weiterhilft, aber Gallery schreibt man mit Doppel-L... :rolleyes:
 
Aaaahh....
Danke Sempervivum für deine Antwort. Nach dreimaligem Durchlesen hat es bei mir dann Klick gemacht und ich habe es verstanden. Es funktioniert perfekt. Vielen Dank!
Ach, und danke auch an Julian, du hast natürlich recht, aber soll man sein Script nicht so kurz wie möglich halten? ;)
 
mikdoe schrieb:
Wieso klappt der Code aus Beitrag 3 nicht?
Zum Vergrößern anklicken....
Klassisches Closure-Problem. In der Variablen bild ist bei jedem Timeout der Wert vom letzten Durchgang drin, da ja in der anonymen Funktion ja auf die Variable und nicht auf den Wert, den die Variable hat, wenn die Funktion erzeugt wird, verwiesen wird.

@Sempervivum: eine globale Variable mit dem wahnsinnig eindeutigen Namen timer ist jetzt nicht dein Ernst...
 
Zuletzt bearbeitet von einem Moderator:
So ganz ist mir das in diesem Fall noch nicht klar, warum der Code aus #3 nicht das Erwartete liefert.
 
Vereinfachtes Beispiel:
Code: 
for (var i = 0; i < 5; i += 1){
	window.setTimeout(function(){
		alert(i);
	}, i*2000);
}
- die anonyme Funktion greift auf i zurück und nicht auf den Wert von i, den es hatte, als die Funktion erstellt wurde. Genau deswegen meckert jsHint/jsLint darüber, wen man Funktionen in einer Schleife erzeugt.
 
Kann mein Hirn im Moment nicht knacken diese Nuss. Das kommt bestimmt irgendwann, wenn man nicht mehr drüber nachdenkt :)

Wie sähe so ein Konstrukt in Perl aus? Dann verstehe ich es vielleicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben