Discussion :

[youri89]

Bonjour,

J'utilise la fonction suivante pour cadrer une photo en zoom.

En CSS, je définis un margin left pour center la photo grossomodo pour une photo de 800 px de large et 60px de cadre de couleur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#photos { z-index:99; position: absolute; top: 60px; margin:0 0 0 -430px; visibility:hidden; background-color:#554336; vertical-align:center; text-align:center; border : 2px groove white; left:50%; }

Ensuite en JS, je recentre la photo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
ou large est la largeur de la photo +60 px de cadre et legend est le texte de legende)
 
function JF_photos(nb,URL,large,legend){
var margin=large*0.5*(-1);
var long=legend.indexOf(' - ',0);
if(long==-1) {long=legend.length}
if(long==0) {long=10}
legend=legend.replace(' _ ', '\r\n');
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
legend=legend.replace('zzz', "'");
document.getElementById('photos').style.visibility="hidden";
document.getElementById('chargement_photo').style.visibility="visible";
document.getElementById('fond_photo').style.visibility="visible";
document.images['photo_gr'].src=URL;
document.images['photo_gr'].alt=legend;
document.getElementById('titre').cols=long;
document.getElementById('photos').style.width=large;
document.getElementById('photos').style.marginLeft=margin;
document.getElementById('bandeau_photo').style.width=large;
document.getElementById('chargement_photo').style.width=large;
document.getElementById('retour_gr').href="#"+nb; 
document.getElementById('titre').value=legend;
ident=setTimeout("JF_affichage_photos()",100);
}
 
function JF_affichage_photos(){
if(document.images['photo_gr'].complete) {
document.getElementById('chargement_photo').style.visibility="hidden";
document.getElementById('photos').style.visibility="visible";
}
else
{ident=setTimeout("JF_affichage_photos()",100);}
}

Pas de souci avec IE (7 ou 8), avec FF, rien ne bouge.
Si je mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.alert(margin);

J'ai bien -163 qui s'affiche dans la fenêtre donc la variable margin est bien renseigné.

Voila, je sèche.

Merci de votre aide.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('photos').style.marginLeft=margin + 'px';

[devyan]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('photos').style.marginLeft=margin + 'px';

Même chose pour width

[youri89]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('photos').style.marginLeft=margin + 'px';

Merci, ça marche.

J'avais essayé de mettre px à la fin mais j'avais du utilisé les " au lieu de ' ou j'avais rajouté le + 'px' dans la définition de la variable
var margin=large*0.5*(-1) + 'px';

En tout ca, ça marchait pas et j'ai cherché ailleurs sans pousser plus loin.