Formatage d'une image en pop-up

**Nerva** · 04/09/2006, 11h21

Bonjour.

Pour afficher une image dans une fenêtre pop-up, je formate mon code comme suit :

Code :

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

<a href="image.jpg" onClick="window.open('','popup','width=480,height=640,resizable=1')" Target="popup"><img src="vignette.jpg" width="120" height="160" border="0"></a>

Cela fonctionne bien, mais cependant, j'aimerai pouvoir faire quelques améliorations.

1) pour fermer l'image, je clique sur le bouton de fermeture Windows, mais je sais qu'on peut insérer une portion de code qui autorise la fermeture en cliquant n'importe où sur l'image.
J'ai trouvé ceci :

Code :

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

<a href="#" onClick="window.close()">Fermer</a>

Mais je ne sais pas comment l'intégrer dans mon code.

2) au niveau du remplissage de la fenêtre pop-up, j'obtiens ce rendu en définissant la largeur et la hauteur en : width=656,height=496 (en noir, place de l'image) :

En effet, j'ai systématiquement une marge blanche de 8 pixels en haut et à gauche de l'image, ce qui fait que j'augmente la taille (640 -> 656 et 480 -> 496) pour avoir une image centrée, entourée par des marges blanches de taille égale.
Le problème, c'est que le rendu est différent dans Firefox et dans Internet Explorer. J'ai déjà trouvé des sites où l'image était impeccablement intégrée dans la fenêtre Windows, sans marges autour, mais je ne sais pas comment faire.

Merci d'avance.

**KiLVaiDeN** · 04/09/2006, 11h26

Salut,

La meilleure solution consiste à avoir une page générique, par exemple "photo.php" si tu as accès au PHP sur ton serveur, ou bien "photo.htm" si tu n'as que du HTML, et de passer en paramètre le nom de la photo, par exemple :

Code :

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

<a href="photo.php?image=toto.jpg">une super image !</a>

Et ensuite, dans ta page ciblée, tu fais une mise en page, avec ton script window.close() lors du click, et en enlevant les marges dans le BODY.

A+

**Nerva** · 04/09/2006, 11h37

Oui, j'ai déjà entendu parler de cette technique mais je ne sais pas la mettre en oeuvre...

**KiLVaiDeN** · 04/09/2006, 11h52

Connais-tu PHP ?

**Nerva** · 04/09/2006, 11h56

Oui, pas de problème de ce côté-là, je connais. J'ai intégré des compteurs, livre d'or, etc... tout en PHP, je gère un forum en PHPBB, le bidouillage du code, c'est ok mais une page générique pour des photos en pop-up, je ne sais pas.
J'avais fait autrement, en utilisant une page HTML par photo, mais le système est lourd et ne me convient pas. Ta technique a l'air intéressante...

**KiLVaiDeN** · 04/09/2006, 13h03

Ok donc j'ai pas besoin de m'attarder trop sur les bases

Tu as deux choix :

Méthode 1 : passer le nom de l'image en url, et le récupérer dans ta page php via le tableau $_GET. Ensuite, en connaissant le chemin vers tes images, tu fais un truc bête et méchant qui va chercher l'image dans le bon chemin, au niveau de ton src.

Exemple, page1.htm, qui ouvre une popup sur l'affichage de l'image:

Code :

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

<a href="javascript:window.open('photo.php?photo=toto.jpg','popup','width=480,height=640,resizable=1')">une super image !</a>

Page photo.php:

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
<?php
if(isset($_GET['photo']))
   $photoName = $_GET['photo'];
else
   $photoName = 'defaultPhoto.jpg';
 
if(file_exists('/photos/' . $photoName)) {
?>
<html>
<body marginwidth="0">
<a href="javascript:window.close();"><img src="/photos/<?php echo $photoName; ?>" border="0"></a>
</body>
</html>
 
<?php
} // fin if
else {
  echo 'Photo introuvable..';
} // fin else
 
?>

Méthode 2, avec ta photo en base de données. C'est pareil que la méthode1, sauf que tu as le nom de la photo en base de données. Donc tu ne passes qu'un identifiant en url, par exemple id=1, et ensuite, tu fais une requête qui va te retourner le nom de l'image correspondante, que tu afficheras de la même façon..

Voila, j'espère que ça t'aide

A+

**Nerva** · 04/09/2006, 13h38

Alors, mes images sont ici :

/site/photos/gallery/images

J'ai placé tes deux fichiers dans :

/site/photos/gallery/photo.php
/site/photos/gallery/page1.htm

Comme test, je veux afficher la photo photo_test.jpg qui est dans images.

page1.htm

Code :

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

<a href="javascript:window.open('photo.php?photo=photo_test.jpg','popup','width=640,height=480,resizable=1')">Une super image !</a>

photo.php

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
<?php
if(isset($_GET['photo']))
   $photoName = $_GET['photo'];
else
   $photoName = 'defaultPhoto.jpg';
 
if(file_exists('/images/' . $photoName)) {
?>
<html>
<body marginwidth="0">
<a href="javascript:window.close();"><img src="/images/<?php echo $photoName; ?>" border="0"></a>
</body>
</html>
 
<?php
} // fin if
else {
  echo 'Photo introuvable..';
} // fin else
 
?>

Dans le pop-up, j'ai ce message qui s'affiche :

Code :

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

1
2
Warning: file_exists() [function.file-exists]: Unable to access /images/photo_test.jpg in /mnt/128/sdc/7/6/site/photos/gallery/photo.php on line 7
Photo introuvable..

Où est l'erreur ?

**KiLVaiDeN** · 04/09/2006, 14h01

Essaies en enlevant le "/" devant images.

Le "/" sert à partir de la racine, donc en faisant /images, tu pars de la racine de ton site, à la recherche d'un dossier images, hors à priori, il ne se trouve pas là, mais plus haut dans l'arborescence.

A+

**Nerva** · 04/09/2006, 14h06

Ok, merci, ça fonctionne. Mais, page1.htm "disparaît" et ceci s'affiche à sa place dans le navigateur :

[object Window]

De plus...

Dans Firefox : j'ai toujours une marge blanche au dessus de l'image.
Dans IE : marge blanche au dessus et à gauche de l'image.

Bref, pas de changement par rapport à ma méthode initiale, si ce n'est que l'image se ferme en cliquant dedans...

**KiLVaiDeN** · 04/09/2006, 14h11

Salut,

Il faut adapter ta page1.htm afin que le clic ne fasse qu'ouvrir la popup.
J'ai écrit le code vite fait.

Mets l'appel au window.open dans un onClick par exemple, et dans le href, mets #, ou "javascript:return false;" par exemple.

De plus, la page photo.php est aussi à customizer selon tes soins.. A toi d'enlever les marges, d'ajouter un titre si tu veux, de mettre un tableau, de mettre un texte quand tu survoles l'images, etc..

A+

Formatage d'une image en pop-up

JavaScript

Discussions similaires

Partager

Partager