Syncronisation [réalisation d'un diaporama]

Version imprimable

J'essaye de réaliser un diaporama en utilisant JQuery, l'image s'efface, change, puis réapparait (c'est toujours la même balise dont je change juste la source de l'image). Problème, je veux que l'image soit centré, horizontalement pas de problème, mais verticalement lorsque je rajoute une marge (margin-top donc), il la prend en compte uniquement sur l'image suivante...
Code:

1 2 3 4 5 6 7 $("#mainImg").animate({opacity : 0}, 2000, "linear", function(){ $("#mainImg").attr("src",tabImg[i]); var hauteur = (parseInt($(window).height()) - parseInt($("#mainImg").height())) /2; $("#mainImg").css("margin-top", hauteur + "px"); $("#mainImg").attr("src",tabImg[i]); $("#mainImg").animate({opacity : 1}, 3000); });
Important : lorsque je mets un alert() juste après avoir modifier la source de l'image et avant de définir la margin-top, il l'applique bien sur la bonne image... Je suppose donc que c'est un problème de syncrone/asyncrone, mais en utilisant un .delay(xxxx) j'ai toujours le problème...

Précision code : le i a bien le bon indice. tabImg contient l'adresse de mes images (ex : diapo/monimage.jpg)

06/04/2012, 09h00
Launster

Si personne ne trouve, est-ce que quelqu'un sait pourquoi ça ne marche pas, à défaut de savoir comment le faire fonctionner ?

Au final voici la solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function next_img()
{
    if(i < tabImg.length - 1)
    {
        i++;
    }
    else
    {
        i = 0;
    }
    $("#mainImg").stop().animate({opacity : 0}, 2000, "linear", function(){
        $("#mainImg").attr("src",tabImg[i]);
        img.src=tabImg[i];
        $("#mainImg").stop().animate({opacity : 1}, 3000);
 
 
    });
}
 
function reglage_marge()
{
    $("#mainImg").css("margin-top", (parseInt($(window).height()) - parseInt($("#mainImg").height())) /2 + "px");
}

reglage_marge() se déclenche sur le onLoad de l'image