[PHP-JS] Galerie d'images dynamique

Version imprimable

Bonjour,

J'ai suivi le tutoriel de Pierre-Baptiste Naigeon concernant la conception d'une galerie d'images, que l'on peut trouver ici.

Lorsque je clique sur une miniature, je souhaiterais que l'image s'ouvre dans un popup au lieu d'une nouvelle fenêtre.
J'ai essayé de modifier la fonction suivante en utilisant du javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function ajoute_lien($chemin_image, $chemin_miniature, $file) { // Récupère la taille de la miniature sous forme HTML (width="xxx" height="yyy") $taille_html_miniature = getimagesize($chemin_miniature); $taille_html_miniature = $taille_html_miniature[3]; // Rajoute le lien vers l'image au tableau global $GLOBALS['tabl_liens'] $lien = '<a href="javascript:window.open('.$chemin_image.','test','width=100, height=150')">'; $lien .= '<img src="'.$chemin_miniature.'" '.$taille_html_miniature.' alt="'.$file.'">'; $lien .= '</a>'."\n"; array_push($GLOBALS['tabl_liens'], $lien); }
Mais ça ne fonctionne pas car PHP est interprété côté serveur alors que Javascript l'est du côté client.

Je tourne en rond :? . Si quelqu'un parmi vous, peut me donner une piste, je suis preneur.
Merci

salut,

et comme ca?

Code:

1
2
3
4
5
6
 
// Rajoute le lien vers l'image au tableau global $GLOBALS['tabl_liens']
 
$lien = '<a href="#" onclick="window.open('.$chemin_image.',\'test\',\'width=100, height=150\');">';
$lien .='<img src="'.$chemin_miniature.'" '.$taille_html_miniature.' alt="'.$file.'">';
$lien .= '</a>'."/n";

attention avec les antislah

++;)

28/02/2007, 08h22
creatchy

Salut et merci pour ton aide.
ah ces maudits antislash !!!:)

Mais, malheureusement, ça ne fonctionne toujours pas.
En fait, en faisant quelques tests, je m'aperçois que c'est la variable '.$chemin_image.' qui pose problème.

Le lien qui s'affiche est le suivant : ./images/pic1.jpg (si mon répertoire qui contient mes images s'appelle 'images' et ma photo pic1.jpg bien entendu).

Du coup, le chemin vers l'image est incomplet et le script ne trouve pas l'image.
28/02/2007, 08h41
RideKick

Je m'y connais pas trop en js , de plus je vais peut etre dire une betise mais ta fonction Windows open a la place de chemin_image c est pas plutot une page qu 'il faudrait lui donner ?

Je l'ai fais dans un de mes scripts , j 'ai une page , comme parametre , cette page affiche une image passée en GET ...

A voir
28/02/2007, 09h04
creatchy

oui, effectivement, j'ai déjà utilisé cette méthode dans d'autres cas, en ouvrant une page.
Mais j'ai lu dans le forum que l'on pouvait entrer le chemin complet d'une image, et que ça fonctionnait aussi.

Info ou intox ??? En attendant, j'ai essayé les 2 méthodes et je suis planté...:aie:
28/02/2007, 09h13
csbilouze

re,

ridekcik a raison, il faut rentrer l adresse complete de l image. http://....../images/exemple.jpg

par contre, ca t affiche une croix rouge ou il n y a rien qui se passe?

++;)

Tu as un problème de ' dans ton expression

Code:

1
2
3
$lien = '<a href="#" onclick="window.open(\''.$chemin_image.'\',\'test\',\'width=100, height=150\');">';
$lien .='<img src="'.$chemin_miniature.'" '.$taille_html_miniature.' alt="'.$file.'">';
$lien .= '</a>'."/n";

28/02/2007, 09h23
csbilouze

oui effectivement,

dans mon exemple $chemin_image n est pas encadrer par '' :aie:

Bon effectivement, j'ai fait ça :

Code:

1
2
 
$lien = '<a href="#" onClick="window.open(\'test.php\', \'_blank\', \'toolbar=yes,status=yes,menubar=yes,width=500,height=300\')">';

et là; le popup s'ouvre bien.....sans image.

dans ma page test.php, j'ai ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
 
<body>
<img src="<?php echo '.$chemin_image.'; ?>" />
</body>
</html>

28/02/2007, 09h29
titoumimi

Bonjour :)

Ce n'est pas étonnant, dans ta dernière version, à aucun moment tu ne lui passe en paramètre l'adresse de l'image... dur dur donc de la récupérer ;)
28/02/2007, 09h30
ratapapa
Code:

1 2 <img src="<?php echo '.$chemin_image.'; ?>" />
Attention tu demandes ici à php d'afficher la chaine de caractère .$chemin_image. (enfin je crois ^^)

Essaie de remplacer simplement par :
Code:

1 2 <img src="<?php echo $chemin_image; ?>" />
28/02/2007, 09h41
TucSale

juste pour info, et pour eviter les pop-up (bien souvant bloquées) tu peux zommer en utilisant du css comme demontré dans les cours CSS ou encore avec l'affichage / masquage d'un div avec un peu de javascript
28/02/2007, 09h46
creatchy

dur dur php !!! :?
Apparemment, dans ce code, l'adresse de l'image correspond à la variable $chemin_image. Lorsque je fais ce que tu m'as conseillé ratapapa, aucune image ne s'affiche car le lien vers l'image n'est pas complet.

le chemin affiché en faisant un clic droit -> propriétés sur la croix rouge est :

http://localhost/galerie/

Mes images sont dans le répertoire galerie/images !

Pour info, je fais mes tests en local avec Wamp.
28/02/2007, 09h53
ratapapa

Dans ce cas c'est peut etre simplement l'adresse contenue dans ta variable $chemin_image qui n'est pas bonne.
Ca vaudrait peut etre le coup de vérifier lorsque tu renseignes cette variable.
28/02/2007, 09h55
TucSale

Code:

$lien = '<a href="#" onClick="window.open(\'test.php?chemin_image='.$chemin_image.'\', \'_blank\', \'toolbar=yes,status=yes,menubar=yes,width=500,height=300\')">';

tet.php

Code:

<img src="<?php echo $_GET['chemin_image']; ?>" alt="" />
28/02/2007, 09h59
csbilouze

re,
je pense a une simple erreur d assignation de variable.

deux solutions:

1. reassigne une valeur correct a ta variable.

2. rentre le chemin de l image nanuellement dans la fonction window.open et sert toi de ta variable simplement pour contenir le nom et le format de l image.

http://localhost/galerie/images/'.$chemin_image.'

++;)
28/02/2007, 10h00
creatchy

Excellentissime :)
Bien vu la méthode Get !!!

Merci beaucoup TucSale et à vous tous pour votre disponibilité et vos idées.

@+