Ouverture d'une fenetre photo

Version imprimable

15/01/2009, 10h10
solorac

Ouverture d'une fenetre photo

Bonjour la Communauté,

Je cherche comment faire une fenêtre dans laquelle s'ouvrirait une photo lors que l'on a cliquer sur un lien.
cette fenêtre devra être de la dimension exacte de la photo et elle devra s'ouvrir au milieu de l'écran (aussi bien en hauteur qu'en largueur).

Avec targuet blank, cette nouvelle fenêtre active s'ouvrira sur la page initiale.

Merci pour votre aide
15/01/2009, 10h56
Nnay_
Bonjour,

L'idée est d'ouvrir une fenêtre avec

Code:

window.open()

Doc

Ensuite, dans cette page, tu exécute cette fonction, je l'avais codée pour redimensionner une fenêtre aux dimensions d'une image :
Code:

1 2 3 4 5 6 7 function redimFenetre(img) { height = img.height + 100; width = img.width + 30; window.resizeTo(width, height); }
il faut passer la reference vers l'image à cette fonction avec getElementById par exemple ou images[]
(je rajoute +100 et +30 aux hauteur, largeur à cause des bordures de fenêtres)

ensuite, pour repositionner ta fenêtre tu utilise ça :

Code:

window.moveTo(x,y)

et

screen.availWidth
screen.availHeight
screen.Width
screen.Height
15/01/2009, 10h57
SpaceFrog

y'en a plein les contribution et les sources sur ce forum :roll:
15/01/2009, 10h59
le_chomeur

sachant qu'un popup risque d'être bloquée par certain navigateur / bloqueur de popup ...

utilise plutôt une popup under :-)
15/01/2009, 14h45
solorac

Merci pour votre coup de main.
Ne connaissant pas du tout le javascript, c'est la raison pour laquelle je demandais votre aide.
Je vais essayé de mettre en place votre soluce.
@+

Bonjour la Communauté,

L'ouverture de ma pop-up se fait correctement.
Mais impossible de la positionner malgré l'aide d'hier.
Le code sur la page "pop-up" semble ne pas fonctionner.

Code page "mère" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SCRIPT language="javascript">
   function ouvre_popup(page) {
       window.open(page,"nom_popup","menubar=no, status=no, scrollbars=no, menubar=no, width=730, height=533");
   }
	</SCRIPT>
</head>
 
 
 
 
<body> 
<div id="container">
	<div id="content">
		<div id="right">
						<div class="thum">
						<A href="javascript:ouvre_popup('photo1.htm')"><img src="pla1.jpg" width="100" height="67" alt="Vue 1 sur l'entrepot" /></A></div>
 
		</div>
	</div>
</div>
</body>

Code sur la popup :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<SCRIPT language="javascript">
function redimFenetre(img) {
	height = img.height + 100;
	width = img.width + 30;
 
	window.resizeTo(730, 533); 
	window.moveTo(220, 150); 
}
</SCRIPT>
 
 
</head>
 
<body>
 
<div class="img"><img src="plateforme1.jpg" width="730" height="487" alt="Vue 1 sur l'entrepot" /></div>
</body>

J'espère que vous pourrez jeter un coup d'oeil réparateur.
@+

J'ai simplifier mon code de ma page principale.
La popup s'ouvre correctement mais j'ai une marge d'un ou deux pixel en bas et à droite, et ce malgré le fait que je mis les dimension exacte.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <SCRIPT language="javascript"> function ouvre_popup(page) { window.open(page,"photo1","menubar=no, status=no, scrollbars=no, menubar=no, width=730, height=487");} </SCRIPT> </head> <body> <div id="container"> <div class="thum"> <A href="javascript:ouvre_popup('photo1.htm')"><img src="pla1.jpg" width="100" height="67" alt="Vue 1 sur l'entrepot" /></A> </div> </div> </body>
Maitenant ce pose le probleme du centrage de la popup.
J'ai essayé bon nombre de solution trouvée sur le net mais aucune ne fonctionne. Je suis un peu bloqué.

Dans ma page qui fait office de popup, j'ai mis le code suivant :
Code:

1 2 3 4 5 6 7 <SCRIPT language="JavaScript"> var largeur=screen.availWidth; var hauteur=screen.availHeight; var demiL=((largeur-730)/2); var demiH=((hauteur-487)/2); window.moveTo(demiL,demiH); } </SCRIPT>
Mais cela ne fonctionne toujours pas.

Quelqu'un aurait-il une idée ??? Je suis preneur.

J'ai trouvé une solution qui me convient. Elle est assez simple et necessite l'emploi du code uniquement sur la page de "départ".

Voiçi :
Code:

1 2 3 4 5 6 7 <script language="JavaScript"> function centrepopup(url,nom,largeur,hauteur,options) { var haut=(screen.height-hauteur)/2; var Gauche=(screen.width-largeur)/2; centrepopup=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options); } </script>
Par contre, je ne comprends pas très bien le javascript donc j'aurais besoin de vos lumière pour m'expliquer le code :

Pourquoi après le nom de la fonction il y a "url,nom" et plus loin "option", alors que nulle part après on y fait référence ?

Et cette "option" que peut-elle faire de plus ?

Merci pour votre aide

19/01/2009, 11h00
Auteur

Citation:

Envoyé par solorac

Bonjour la Communauté,

L'ouverture de ma pop-up se fait correctement.
Mais impossible de la positionner malgré l'aide d'hier.
Le code sur la page "pop-up" semble ne pas fonctionner.

car tu n'appelles pas la fonction. Ensuite pour ce bout de code fonctionne, il faut que l'image soit complètement chargée (et ce paramètre dépend du débit).
Voilà un exemple qui gère ça.

Citation:

Envoyé par solorac

Par contre, je ne comprends pas très bien le javascript donc j'aurais besoin de vos lumière pour m'expliquer le code :

Pourquoi après le nom de la fonction il y a "url,nom" et plus loin "option", alors que nulle part après on y fait référence ?

Et cette "option" que peut-elle faire de plus ?

le paramètre options est utilisé dans le cas où tu souhaiterais ajouter des options à la fonction open().
En passant ce code peut provoquer des erreurs dans la mesure où si options ne contient pas d'instructions la lise des arguments de la fonction open() se termine par une virgule :

Code:

window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);

mais bon visiblement c'est la mode :aie: (j'ai souvent vu ce morceau de code ici et là)

Merci pour les infos, mais vu ma méconnaissance du language javascript la correction attendra un peu.

Par contre, une petite précision svp : Comment cela se fait il que je ne puisse ouvrir qu'une seule pop-up alors que je répète plusieurs fois le code, si je clique sur une autre photo, la photo s'ouvre dans la même popup.

Merci pour votre aide :

Voiçi mon code :

Code:

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
38
39
<script language="JavaScript">
function centrepopup(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
 
 
 
function centrepopup1(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup1=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
 
function centrepopup2(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup2=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
 
function centrepopup3(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup3=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
 
function centrepopup4(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup4=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
 
function centrepopup5(url,nom,largeur,hauteur,options) {
var haut=(screen.height-hauteur)/2;
var Gauche=(screen.width-largeur)/2;
centrepopup5=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+",height="+hauteur+","+options);
}
</script>

Code:

1
2
3
4
5
6
7
8
<p class="thumbs">
			<a href='javascript:centrepopup("magcaa.htm","Fencent",700,525,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/caamag.jpg" width="75" height="75" alt="Comptoir Auto Avignonnais" /></a>
			<a href='javascript:centrepopup1("magmeai.htm","Fencent",700,525,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/meaimag.jpg" width="75" height="75" alt="M.E.A.I." /></a>
			<a href='javascript:centrepopup2("magsas.htm","Fencent",700,525,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/sasmag.jpg" width="75" height="75" alt="Sport Auto Sisteron" /></a>
			<a href='javascript:centrepopup3("magapa.htm","Fencent",700,525,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/apamag.jpg" width="75" height="75" alt="Alès Pièces Auto" /></a>
			<a href='javascript:centrepopup4("magopa.htm","Fencent",700,294,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/opamag.jpg" width="75" height="75" alt="Orange Pièces Auto" /></a>
			<a href='javascript:centrepopup5("magberard.htm","Fencent",700,505,"menubar=no,scrollbars=no,statusbar=no")'><img src="../images/images/magberard.jpg" width="75" height="75" alt="Berard S.A." /></a>
			</p>

19/01/2009, 14h39
Auteur

sans doute parce que les pop-up ont toutes le même nom (Fencent).
21/01/2009, 13h32
solorac

Exact. Cela fonctionne