Formatage d'une image en pop-up

Version imprimable

04/09/2006, 11h21
Nerva

Formatage d'une image en pop-up

Bonjour.

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

Code:

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

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

http://img207.imageshack.us/img207/5665/popupsq2.jpg

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.
04/09/2006, 11h26
KiLVaiDeN

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:

<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+
04/09/2006, 11h37
Nerva

Oui, j'ai déjà entendu parler de cette technique mais je ne sais pas la mettre en oeuvre...:(
04/09/2006, 11h52
KiLVaiDeN

Connais-tu PHP ?
04/09/2006, 11h56
Nerva

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

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

Tu as deux choix :

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

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

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 ?>
:arrow: 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+

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:

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

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:

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 ?

04/09/2006, 14h01
KiLVaiDeN

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+
04/09/2006, 14h06
Nerva

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... :(
04/09/2006, 14h11
KiLVaiDeN

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+