Ouverture d'une fenetre photo

**solorac** · 15/01/2009, 10h10

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

**Nnay_** · 15/01/2009, 10h56

Bonjour,

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

Code :

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

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 :

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

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 :

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

window.moveTo(x,y)

et

screen.availWidth
screen.availHeight
screen.Width
screen.Height

**SpaceFrog** · 15/01/2009, 10h57

y'en a plein les contribution et les sources sur ce forum

**le_chomeur** · 15/01/2009, 10h59

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

utilise plutôt une popup under :-)

**solorac** · 15/01/2009, 14h45

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.
@+

**solorac** · 16/01/2009, 12h08

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 :

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
<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 :

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
<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.
@+

**solorac** · 16/01/2009, 16h05

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 :

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
<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 :

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

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.

**solorac** · 19/01/2009, 10h28

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 :

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

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

**Auteur** · 19/01/2009, 11h00

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.

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 :

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

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

mais bon visiblement c'est la mode

(j'ai souvent vu ce morceau de code ici et là)

**solorac** · 19/01/2009, 14h16

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 :

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
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 :

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

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>

**Auteur** · 19/01/2009, 14h39

sans doute parce que les pop-up ont toutes le même nom (Fencent).

**solorac** · 21/01/2009, 13h32

Exact. Cela fonctionne

Ouverture d'une fenetre photo

JavaScript

Discussions similaires

Partager

Partager