PHPfrance

la communauté d'entraide francophone dédiée au PHP

ouverture d'image en popup

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : ouverture d'image en popup

par AB » 11 oct. 2007, 12:32

Tu devrais essayer sur un exemple simple, puis seulement ensuite l'adapter à ton code.

En fait le plus propre consiste à mettre les paramètres de liaison dans le href puis de pointer cette adresse avec javascript window.open en utilisant this.href sans oublier return false pour éviter d'ouvrir plusieurs fenêtres.
echo '<a href="photo_agrand.php?photo=.'$chemindelaphoto.' " onclick="window.open(this.href,\'photos\',\'height='.$imgheight.',width='.$imgwidht.' \'); return false;"><img src="petiteimage.jpg" alt="" /></a>';
Dans ta page photo_agrand.php il faudra donc récupérer le chemin de la grande photo pour pouvoir l'afficher. Ce chemin à été transmis dans la variable photo (on aurait pu lui donner un autre nom) et a pour valeur $chemindelaphoto.

Donc dans photo_agrand.php pour récupérer cette valeur
<?php 
$cheminphoto = isset($_GET['photo'])? $_GET['photo'] : '';
?>

puis dans le code html

<img src = "<?php echo $cheminphoto ?>" alt="" />

EDIT

Dans la première ligne de code, dans la mesure du possible, il est souvent beaucoup plus facile et lisible de mettre le php dans le code html ce qui donne:
... 
<body>
<div> 
<a href="photo_agrand.php?photo=<?php echo $chemindelaphoto?>" onclick="window.open(this.href,'photo','height=<?php echo $imgheight?>,width=<?php echo $imgwidht?>'); return false;"><img src="petiteimage.jpg" alt="" /></a>
</div>
</body>
</html>

je ne m'en sort pas

par tunsia » 10 oct. 2007, 09:52

bonjour,
désolé mais j'ai du mal,
je résume: -1- je creer une page "photo_agrand.php" ça ok,
cette page remplace donc <a href="modules/".$ModName."/myimages/$photoid.$extension\"
dans laquelle il y aura le code nécessaire pour afficher ta photo.
de quel code parles tu ?
Dans les paramètres de l'url (dans window.open) qui mène vers cette nouvelle page tu dois donc indiquer le nom de ta photo (ou un paramètre permettant de la retrouver dans la page de destination "photo_agrand.php").
dans le code original le paramètre permetant de retrouver les photos est:
<img src=\"modules/".$ModName."/myimages/thumb/$photoid.$extension\" border=\"0\" alt=\""._CLICKIMAGE."\"></
est ce bien cela?
il ne peut donc pas y avoir de nom de photo
window.open('photo_agrand.php?photo=".nomdelaphoto."', 'nom', 'options');
je comprends pas
'photo_agrand.php?photo=".nomdelaphoto."'
En essayant tout de même de sortir un code voila ce que ça donne 
< a href="photo_agrand.php" onclick="window.open('photo_agrand.php?\"modules/".$ModName."myimages/thumb/$photoid.$extension\"','photos','height=\"$imgheight\",width=\"$imgwidht\"' border=\"0\" alt=\""._CLICKIMAGE."\"></a><br />\n"
C'est pas gagné!!!... je sais.
j'essaye, mais je bug vraiment

par AB » 09 oct. 2007, 18:02

Par contre je ne suis pas certain du résultat dans tous les navigateurs si tu définis un href et un onClick sur le lien. Je verrais plus quelque chose du genre :

Code : Tout sélectionner

<a href="javascript:window.open(...);">...</a>
Arrêtes de me faire peur :o

J'avais testé sur IE, FF et Safari avec succès. Y'a des navigateurs sur lesquels ça passe pas ?

par AB » 09 oct. 2007, 15:02

Bah j'avais oublié de me connecter.

Donc pour reprendre mon exemple:

window.open('photo_agrand.php?photo=".nomdelaphoto."', 'nom', 'options');

C'est dans options que tu dois mettre les options, par exemple pas de menus pour la fenêtre, et les dimensions de la fenêtre.

La liste des options ici http://www.toutjavascript.com/savoir/savoir15.php3

par Invité » 09 oct. 2007, 15:00

IL faut que le lien que tu fais avec window.open mène vers une nouvelle page.

Tu dois donc créer une nouvelle page par exemple "photo_agrand.php" dans laquelle il y aura le code nécessaire pour afficher ta photo.

Dans les paramètres de l'url (dans window.open) qui mène vers cette nouvelle page tu dois donc indiquer le nom de ta photo (ou un paramètre permettant de la retrouver dans la page de destination "photo_agrand.php").

Toujours dans window.open, tu indiques les dimensions (ou un peu plus) de ta photo qui permettront de définir les dimensions de la fenêtre à l'ouverture. C'est facile dans ton deuxième code puisque ces valeurs sont données par $imgwidth et $imgheight.

Pas évident les liens

par tunsia » 09 oct. 2007, 13:27

bonjour,
Aïe! je suis perdue! je comprends le principe, mais ne réussie pas à appliquer.
j'y vais un peu trop au hazard
2 exemples que j'ai tenté: 
<a href="javascript:window.open(\"modules/".$ModName."/myimages/$photoid.$extension\);"><img src=\"modules/".$ModName."/myimages/thumb/$photoid.$extension\" border=\"0\" alt=\""._CLICKIMAGE."\" width=\"$imgwidth\" height=\"$imgheight\"></a><br />\n";
<a href=\"modules/".$ModName."/myimages/$photoid.$extension\" onclick=\"window.open(this.href);"><img src=\"modules/".$ModName."/myimages/thumb/$photoid.$extension\" border=\"0\" alt=\""._CLICKIMAGE."\" width=\"$imgwidth\" height=\"$imgheight\"></a><br />\n"
dans ce que j'ai lu sur window open il faut:

Code : Tout sélectionner

window.open('URL', 'nom', 'options');
un exemple précis

Code : Tout sélectionner

window.open('/img/logo.png', 'photo', 'height=100, width=200, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no');
jusque là ça va, mais ça se complique quand je dois adapter mon code existant à cette méthode. De plus, (encore plus complexe) je souhaite que la popup s'ouvre à la taille de l'image et non pas avec une taille prédéfinie.
What else?
c'est tout mais je crois que je vais avoir mal à la tête!
merci à vous

par Ryle » 09 oct. 2007, 10:47

La cible "_new" n'existe pas.
- "_blank" => ouvre la page dans une nouvelle fenêtre.
- "_top" => ouvre la page dans la fenêtre la plus "haute" lorsque tu utilises des frames.
- "_self" => (par défaut) ouvre la page dans la fenêtre active.
- nom_de_fenetre => ouvre la page dans la fenêtre nommée "nom_de_fenetre". Si cette fenêtre n'existe pas, une nouvelle fenêtre est ouverte. Contrairement à _blank qui ouvre une nouvelle fenêtre à chaque fois, tu peux ainsi ouvrir tous tes liens dans une seule nouvelle fenêtre.

Pour définir la taille d'une fenêtre il te faut effectivement passer par du javascript. Par contre je ne suis pas certain du résultat dans tous les navigateurs si tu définis un href et un onClick sur le lien. Je verrais plus quelque chose du genre :

Code : Tout sélectionner

<a href="javascript:window.open(...);">...</a>

par AB » 08 oct. 2007, 20:32

Il faudra mettre un bout de code javascript dans ta balise <a>

Cherches du côté de window.open dans google

ton code devrait ressembler à :

Code : Tout sélectionner

<a href=\"modules/".$ModName."/myimages/$photoid.$extension\" onclick=\"window.open(...
Il faut ouvrir une nouvelle fenêtre avec window.open et donner les paramètres que tu souhaites.

ouverture d'image en popup

par tunsia » 08 oct. 2007, 17:47

bonjour,
je pense avoir identifié 2 codes. Je souhaiterais à présent que les images s'ouvrent en popup à la taille de la grande image.
Je pensais idiotement qu'en mettant "_new" à la place de " _blank" suffirait!!! :oops: domage....
le premier code:
fig['position_thumb'] == 0) {
				echo "  <table border=\"0\" cellpadding=\"2\" cellspacing=\"2\" width=\"100%\">\n";
				echo "    <tr>\n";
				echo "      <td align=\"center\">\n";
				if (mysql_num_rows($photo) >= 1) {
				 	while (list($photoid, $extension) = mysql_fetch_row($photo)) {
				     	echo "<a href=\"modules/".$ModName."/myimages/$photoid.$extension\" target=\"_blank\"><img src=\"modules/".$ModName."/myimages/thumb/$photoid.$extension\" border=\"0\" alt=\""._CLICKIMAGE."\"></a>\n";
				 	} 
				}
deuxième code:
if($config['position_thumb'] == 1) {
				echo "  <table border=\"0\" cellpadding=\"2\" cellspacing=\"2\" width=\"100%\">\n";
				echo "    <tr>\n";
				if (mysql_num_rows($photo) >= 1) {
					echo "      <td width=\"2%\" valign=\"top\">\n";
					echo "        <table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">\n";
					echo "          <tr>\n";
					echo "            <td>";
				 	while (list($photoid, $extension) = mysql_fetch_row($photo)) {
				     	$size = @getimagesize("modules/".$ModName."/myimages/thumb/$photoid.$extension");
						$imgwidth = $size[0];
						$imgheight = $size[1];
						echo "<a href=\"modules/".$ModName."/myimages/$photoid.$extension\" target=\"_blank\"><img src=\"modules/".$ModName."/myimages/thumb/$photoid.$extension\" border=\"0\" alt=\""._CLICKIMAGE."\" width=\"$imgwidth\" height=\"$imgheight\"></a><br />\n";
				     	echo "<br />";
				    	
				 	}
merçi de m 'aider