Passage de position:fixed à absolute, relative ou static [Résolu]

[FabienThot69]

Bien le bonjour à tous.

Ça va faire 24h que j'essaie de résoudre un souci sur un diaporama 'portable' que je suis en train de programmer sans avancer d'un iota, alors je prends un moment pour lancer une petite bouteille à la mer !

Principe et logique : on a une image placée dans un document (dans un conteneur ou directement dans 'body'), et le script lui ajoute un événement 'click' qui lance le diaporama.

On prend soin d'enregistrer le type de positionnement (static, relative, etc.) et la position "relative" de l'image dans des variables(ici respectivement imgInitialPosition, imgInitialRelativePosX et imgInitialRelativePosXY). Puis on la passe en 'position:fixed'.

Avant l'animation, la scroll bar est retirée, et on applique un petit fondu sur l'arrière plan qui se déroule tranquillement pendant le mouvement de l'image.

L'image se centre alors par rapport à l'écran et sa taille augmente. Bon, une fois l'animation terminée on peut naviguer entre les diapos, ça ça va...

Enfin, lorsqu'on ferme le diaporama, l'image 'active' se replace dans le document et reprend une taille proportionnelle (avec les ajustements nécessaires si taille différente - toujours en position:fixed).

Avant de remettre la scrollbar, on repasse dans le type de positionnement initial. C'est là que le bas blesse...

Le problème rencontré : au moment du changement de la propriété .css('position'), l'image disparaît !

Pourtant elle est toujours dans son conteneur, sa valeur display est sur 'block', .css 'left' et 'top' nickel, 'scr' ok bref... je ne sais plus trop quoi tester.

J'ai essayer de dupliquer l'image et d'implémenter la copie dans le conteneur que j'ai vidé préalablement, rien n'y fait.

Une idée ? Un conseil ? Une critique ?

Extrait de la fonction de clôture du diaporama :

Code :

1
2
3
4
function closeDiapo(){
/*Tout un tas de trucs...
...*/
//déplacement et redimensionnement de l'image
img.delay(duration2).animate({left : x, top : y, width : w, height : h}, duration3, 'easeOutCirc', function(){
//POSITION FINALE (définie après l'animation de l'image - callbackfunction)
x = imgInitialRelativePosX + adjustX;
y = imgInitialRelativePosY; //définition
.
console.log('x == ' + x + ' et y == ' + y); [--> affiche "x == 0 et y == 520" (ok)]
console.log($(this).css('position')); [--> affiche "fixed" (ok)]
.
//on duplique l'image pour pouvoir la positionner en relatif
/*$(document.createElement('img')).attr('id', (imgID + '_copy'))
.attr('src', path)
.css('position', imgInitialPosition)
.css('left', x)
.css('top', y)
.css('z-index', (indexImg + 1))
.css('width', w)
.css('height', h)
.appendTo(box);*/ [ça c'était mon essai de duplication qui n'a rien donné^^]
.
box.children().filter(function(){ 
if($(this).attr('id') !== imgID){
console.log($(this).attr('id') + ' retirée !'); [--> affiche "img2 retirée !" "img 3 retirée !" etc. (ok)]
return true;
}
else return false;
}).remove(); //on vire tous les enfants de notre box à l'exception de notre de img [ou de sa copie]
.
console.log(box.children().attr('id')); [--> affiche "img1" (ok)]
.
img.css('position', imgInitialPosition).css('left', x).css('top', y);//on repasse dans le type de positionnement initial 
.
console.log(img.css('position') + img.css('left') + img.css('top')); [--> affiche "relative 0 520" (ok)]
.
$('body').css('overflow', 'auto'); 
box.css('overflow', 'auto'); //barres de défilement réactivées
.
img.bind({
mouseenter : pointerCursor,
mouseleave : defaultCursor,
click : launchDiaporama
}); //EH replacés 
.
console.log('closeDiapo : FIN');
});
}

Si je remplace "imgInitialPosition" par "fixed", l'image s'affiche (mais évidemment pas à l'endroit voulu).

[FabienThot69]

Page test - pour que vous voyez de quoi je parle...

[FabienThot69]

On m'a donné la solution sur un autre forum :

En vérité, c'est ma démarche qui n'était pas bonne. Plutôt que de vouloir travailler avec l'image originale, ce qui pose tout un tas de problème, mieux vaut la cloner, la passer en "hidden" et travailler avec le "double".

On peut facilement donner l'illusion que c'est l'image de départ qui se déplace, et il n'y a plus de problème de repositionnement à la fin du diaporama.