[jQuery] Image Faden doet vreemd *

[ZpAz]

Ik ben bezig om een 'image swap/fade' ding aan het maken in javascript. Welke in de header via faden steeds een ander plaatje laad zien.

Nu zijn het standaard plaatjes, welke over (als JS aanstaat) de header worden heengeplakt. Zodat als er geen JS is er gewoon een statische header blijft staan.

De images heten 1.jpg 2.jpg e.d. En deze worden dan 'gelooped'. Is hij bij numberOfImages dan zet hij hem weer terug op 0, zodat hij weer van voor af aan begint.

Nu doet hij nogal vreemd als hij weer opnieuw begint, hij laat dan heel even het statische plaatje zien. Wat best irritand is, want dat ziet er niet mooi uit. De overgangen van 1 naar 2, en 2 naar 3 bijvoorbeeld doen het wel prima.

Hier een voorbeeld URL:

http://klanten.indev.nl/niepoth/kreta/

En hier de code wat voor het animeren zorgt.

code:

curImg = 0;
speed = 3500;

function swap() { //This function swaps the images
    
    $("#header_fader_in").css("opacity","0"); //Set the second layer invisible
    curImg++; //Goto next pic
    $("#header_fader_in").attr("src",dir + "/" + curImg + ".jpg"); //Swap image
    $("#header_fader_in").fadeTo("slow","1", function() { //Fade in, when done, set first layer with the same image
        $("#header_fader").attr("src",dir + "/" + curImg + ".jpg");
    });
    
    if(curImg == numberOfImages)
        curImg = 0; 
        
    setTimeout("swap();",speed); //Call self again
    
}

setTimeout("swap();",speed); //This function calls the swap function every xxx milisec

Wat de code in een notendop doet:
Laag 1 op 0 opacity zetten, plaatje veranderen, en weer infaden. Als hij helemaal is ingefaded zet hij op laag 0 hetzelfde plaatje. Even wachten, en hetzelfde herhalen voor een nieuw plaatje.

[ Voor 7% gewijzigd door ZpAz op 10-09-2008 22:55 ]

[Badger]

Static plaatje loshalen van de rest van je header, die in #header_fader_in zetten als default en die telkens van src laten veranderen.

[ZpAz]

Ik heb het nu zo gedaan omdat ik dan geen html code hoef aan te passen, en het zonder JS ook werkt. Mochten er geen andere tips komen, dan zal ik die van jou even proberen.

Probleem opgelost, de nieuwe swap functie:

code:

function swap() { //This function swaps the images
    
    curImg++; //Next image
    console.log(curImg);
    $("#header_fader_in").attr("src",dir + "/" + curImg + ".jpg");
    $("#header_fader").css("opacity","0"); //show image back
    //Check what new image should be
    if(curImg == numberOfImages)
        curImg = 0;
    $("#header_fader").attr("src",dir + "/" + (curImg+1) + ".jpg");
    
    $("#header_fader").fadeTo("slow","1"); //Fade old image out
    
    setTimeout("swap();",speed); //Call self again
    
}

[ Voor 63% gewijzigd door ZpAz op 11-09-2008 20:36 ]