[RESOLU] Afficher popup, variable php

Afficher popup, variable php [RESOLU] - PHP - Programmation

Marsh Posté le 24-08-2006 à 22:58:33    

bonjour je voudrai affiché un popup avec ce code
Ce code se situe entre les deux head

Code :
  1. <SCRIPT LANGUAGE="JavaScript">
  2. <!--
  3. function PopupImage(img) {
  4. titre="Agrandissement";
  5. w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
  6. w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>" );
  7. w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+10,document.images[0].height+30); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>" );
  8. w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>" );
  9. w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>" );
  10. w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt=' Image dans pop-up '>" );
  11. w.document.write("</TD></TR></TABLE>" );
  12. w.document.write("</BODY></HTML>" );
  13. w.document.close();
  14. }
  15. //-->
  16. </SCRIPT>


 
Ce code est dans le body, mais le line ne réagit pas, je pense que c'est une histoire de guillemet

Code :
  1. echo "<A href='javascript:PopupImage(".$cheminG." )'>Cliquer pour agrandir</A>";


 
Avez vous des idées?


Message édité par mule_panda le 30-08-2006 à 10:25:25
Reply

Marsh Posté le 24-08-2006 à 22:58:33   

Reply

Marsh Posté le 24-08-2006 à 23:42:48    

en faite j'ai résolu mon probléme avec ceci :
 

Code :
  1. <A href='javascript:PopupImage("<? echo $cheminG ?>" )'>Première image</A>


 
Mais je voudrais savoir s'il etait possible de limité la grandeur de la fenetre popup, j'ai donné le script precedemment

Reply

Marsh Posté le 25-08-2006 à 07:57:53    

"limité la grandeur de la fenêtre popup"
La limiter par quoi ?
 
La taille de la fenêtre est 400 par 400 comme cela est indiqué par la ligne :
 
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
 
Pour avoir une autre taille, il faut donner d'autres valeurs à width et height.
 
Voici le code que j'avais pondu pour faire une fenêtre popup ayant comme taille, soit celle que je passais en paramètre, soit la taille maximale de l'écran.

<script language="JavaScript">
function display_painting(p_name,p_w,p_h,p_legend) {
   if (self.innerWidth) {
      winwidth = self.innerWidth;
      winheight = self.innerHeight;
   }
   else if (document.documentElement && document.documentElement.clientWidth) {
      winwidth = document.documentElement.clientWidth;
      winheight = document.documentElement.clientHeight;
   }
   else if (document.body) {
      winwidth = document.body.clientWidth;
      winheight = document.body.clientHeight;
   }
   if (Number(p_w) < winwidth) winwidth = Number(p_w);
   if (Number(p_h) < winheight) winheight = Number(p_h);
   winwidth += 8; winheight += 40;
 pwin=window.open("","","toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=1,scrollbars=yes,copyhistory=0,width="+winwidth+",height="+winheight+",left=10,top=10" );
   pwin.document.write("<html><head>" );
   pwin.document.write("<title>Zoom</title>" );
   pwin.document.write("<style type=text/css>" );
   pwin.document.write("body {" );
   pwin.document.write("margin:0;" );
   pwin.document.write("padding:0;" );
   pwin.document.write("color:white;" );
   pwin.document.write("background-color:black; }" );
   pwin.document.write("</style>" );
   pwin.document.write("</head>" );
   pwin.document.write("<body>" );
   pwin.document.write("<img src="+p_name+" width="+p_w+" height="+p_h+">" );
   pwin.document.write("<table noborder width=100%><tr>" );
   pwin.document.write("<form><td align=left>"+p_legend+"</td>" );
   pwin.document.write("<td align=right><input type='button' value='Fermer' onClick='window.close()'></td>" );
   pwin.document.write("</tr></table></form>" );
   pwin.document.write("</body></html>" );
}
</script>
...
// Appel dans le body par
<a href="javascript:display_painting('tableau_ricardus.jpg','807','1127','Portrait de Petrus Ricardus')">
<img src="mini_ricardus.jpg" width=200 height=118 alt="Ricardus. Cliquer pour agrandir"></a>


N.B. Ce code marche bien, mais je ne l'utilise plus, parce que de nombreux utilisateurs ont des filtres qui ne font pas apparaitre les popup, et parce que c'est aussi plus simple et plus pratique d'afficher l'image en grande taille par une simple redirection dans la fenêtre principale.


Message édité par olivthill le 25-08-2006 à 08:02:19
Reply

Marsh Posté le 25-08-2006 à 09:45:25    

si tu veut mon code va générer une fenetre de 400*400 mais il la redimensionne ensuite suivant le contenu et donc si jai une  image qui va faire 3000*2000 bah la fenetre va dépasser

Reply

Marsh Posté le 25-08-2006 à 13:22:15    

magnifiques exemples de codes bien pourris  :jap:

Reply

Marsh Posté le 25-08-2006 à 20:10:18    

le code de qui?

Reply

Marsh Posté le 25-08-2006 à 21:46:07    

les 2

Reply

Marsh Posté le 25-08-2006 à 23:05:45    

alor donne nous un bon et beau code toi?

Reply

Marsh Posté le 26-08-2006 à 00:36:27    

mule_panda a écrit :

alor donne nous un bon et beau code toi?


Ok :  
 
D'abord quelques principes simples :  
Si ton PC a un killer de popup, ta fenetre sera killée et ton JS generera des erreurs puisque l'objet W (ta fenêtre en l'occurence) n'existera plus.
De plus vous générez le HTML à coup de JS c'est crade
Et enfin si le mec n'a pas JS, il l'a dans le cul.
 
Donc le but du jeu est de créer un objet contenant les méthodes qui vont nous permettre d'agir entre les deux fenetres.
d'abord page.html va appeler popup.html dans une popup.
ensuite popup.html une fois entièrement chargée, va appelée une méthode écrite dans la fenêtre parente.
 
page.html  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6. pop={
  7.  obj:null,
  8.  win:null,
  9.  open:function(link) {
  10.   pop.obj=link;
  11.   pop.win=window.open("popup.html","_blank" );
  12.  },
  13.  makeImg:function() {
  14.   var img=pop.win.document.getElementById("myImg" );
  15.   img.src = pop.obj.href;
  16.  }
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <a href="http://img227.imageshack.us/img227/9743/imbrikfu0.jpg" onclick="pop.open(this);return false">Voir la grande image</a>
  22. </body>
  23. </html>


 
Avec un code comme celui-ci, nous n'avons pas besoin de 36 appels bizarroides. Je rappelle que pop peut être mise dans un fichier JS à part.
 
maintenant popup.html :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6.  window.onload = function() {
  7.   if (window.opener && window.opener.pop) {
  8.    window.opener.pop.makeImg();
  9.   }
  10.  }
  11. </script>
  12. </head>
  13. <body>
  14. <img id="myImg">
  15. </body>
  16. </html>


une fois la page chargée, la fonction onload de l'objet window (correspond aussi au onload du body) va tester si la fenêtre parente existe et si l'objet pop de la fenetre parente existe. Dans ce cas on va appeler la méthode makeImg() qui va charger l'image dans la popup.
 
Merci de votre lecture, mais il est un peu tard et j'ai pas envie d'extrapoler plus, vous n'aurez qu'à poser vos questions.
 
Je critiquais bien sur la gestion html de la popup qui était un peu naze à mon avis. Je ne vous ai pas codé le resize auto de la fenêtre car il n'est pas forcément pris en compte par la plupart des navigateurs. mais je peux vous le coder sur le même principe si vous voulez


Message édité par gatsu35 le 26-08-2006 à 00:38:29
Reply

Marsh Posté le 26-08-2006 à 10:25:51    

bon je trouve ton code plutot interressant, malgré que tu as été assez bourin en critiquant; mais au moin tu sai argumenté  :jap:  
 
Donc se srcipt sera exécuté sur un intranet un les popup ne pose pas de probléme, de plus le rezise fonctionnera aussi. Donc d'aprés ton code et de ton analyse, le rezise devrai pouvoir etre intégré facilment, il faudrait aussi, que lorsque l'on clique sur l'image cela ferme le popup, et serai c'est là que sa m'interresse le plus, se que si j'ai une image qui fait plus de 500*500(par exemple), cela me la redimensionne en gardant les proportions un peu a la maniére de l'aperçu d'image de windows xp, si l'image est trop grande il reduit sa taille. Je pense que l'on pourrai faire sa avec une condition en JAVASCRIPT  :??:


Message édité par mule_panda le 26-08-2006 à 10:30:10
Reply

Marsh Posté le 26-08-2006 à 10:25:51   

Reply

Marsh Posté le 26-08-2006 à 10:49:34    

Dans ce cas il faut prendre en compte un paquet de paramètres casses-couilles
 
-La taille de l'image (on pourra la recuperer une fois que la page est chargée donc c'est bon :D).
-Les dimensions de la fenetre de l'image
-La resolution de l'écran.
-Prendre en compte aussi que l'utilisateur pourra cliquer sur l'image si celle-ci est réduite à coup de JS (cela permet d'avoir un effet plus cool :D)

Reply

Marsh Posté le 26-08-2006 à 11:35:36    

page.html

Code :
  1. <!-- saved from url=(0014)about:internet -->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. pop={
  8.  maxH:500, maxW:500,
  9.  obj:null,win:null,img:null,intervalCheck:null,
  10.  open:function(link) {
  11.   pop.obj=link;
  12.   pop.win=window.open("popup.html","_blank","width="+(pop.maxW)+",height="+(pop.maxH)+",scrollbars==yes" );
  13.  },
  14.  makeImg:function() {
  15.   var img=pop.win.document.getElementById("myImg" );
  16.   pop.img=img;
  17.   img.src = pop.obj.href;
  18.   pop.intervalCheck=setInterval("pop.checkimgSize()",200);
  19.  },
  20.  checkimgSize:function() {
  21.   if (pop.img.height!="" ) {
  22.    clearInterval(pop.intervalCheck);
  23.    setTimeout("pop.resizeImg()",200);
  24.   }
  25.  },
  26.  resizeImg:function() {
  27.   var img=pop.img;
  28.   imgH=parseInt(img.height);
  29.   imgW=parseInt(img.width);
  30.   if (imgH>imgW && imgH>pop.maxH ) {
  31.    img.height=pop.maxH;
  32.    img.width=parseInt(imgW/imgH*pop.maxH);
  33.   } else {
  34.    if (imgW>imgH && imgW>pop.maxW ) {
  35.     img.width=pop.maxW;
  36.     img.height=parseInt(imgH/imgW*pop.maxW);
  37.    }
  38.   }
  39.  }
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <a href="http://img227.imageshack.us/img227/9743/imbrikfu0.jpg" onclick="pop.open(this);return false">Voir la grande image</a>
  45. <a href="http://abcwallpaper.free.fr/beach004.jpg" onclick="pop.open(this);return false">plage</a>
  46. </body>
  47. </html>


 
popup.html  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style>
  6. body {text-align:center;}
  7. img{border:none; cursor:pointer;}
  8. </style>
  9. <script type="text/javascript">
  10.  window.onload = function() {
  11.   if (window.opener && window.opener.pop) {
  12.    window.opener.pop.makeImg();
  13.   }
  14.  }
  15. </script>
  16. </head>
  17. <body>
  18. <img id="myImg" onclick="window.close()">
  19. </body>
  20. </html>


besoin d'autres features ??
genre un bouton qui permettrait d'afficher l'image dans sa taille original dans la popup même ?
 
edit:update, mais j'ai pas vraiment du tout saisi ce que tu veux exactement :/


Message édité par gatsu35 le 26-08-2006 à 12:37:54
Reply

Marsh Posté le 26-08-2006 à 12:27:01    

En faite, affiché l'image dans sa taille originale, elle va depassé de l'écran donc aucun interet et j'aurai un lien sur ma page qui affiche les résultats de la recherche qui permettera de telecharger l'image original. Sinon merci pour les script je les teste cette aprem, et je dit se que sa donne.  :jap:

Reply

Marsh Posté le 26-08-2006 à 18:37:26    

Tes script fonction trés bien, merci, mais je pinaille un peu car la fenetre ne se redimensionne pas a la taille de l'image. par exemple la fenetre fait 500*500, et une image qui fait 150*200, il reste beaucoup de blanc autour, la fenetre reste a la taille 500*500, et aussi, quand on clic droit ou gauche cela ferme la fenetre  :sarcastic: deplus la fenetre mange un peu l'image aussi  :(


Message édité par mule_panda le 26-08-2006 à 18:41:39
Reply

Marsh Posté le 26-08-2006 à 19:22:18    

tens vla une update de la page

Code :
  1. <!-- saved from url=(0014)about:internet -->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. pop={
  8.  maxH:500, maxW:500,
  9.  obj:null,win:null,img:null,intervalCheck:null,
  10.  open:function(link) {
  11.   pop.obj=link;
  12.   pop.win=window.open("popup.html","_blank","width="+(pop.maxW)+",height="+(pop.maxH)+",scrollbars=no,status=no" );
  13.  },
  14.  makeImg:function() {
  15.   if (!pop.win) return;
  16.   var img=pop.win.document.getElementById("myImg" );
  17.   pop.img=img;
  18.   img.src = pop.obj.href;
  19.   pop.intervalCheck=setInterval("pop.checkimgSize()",200);
  20.  },
  21.  checkimgSize:function() {
  22.   if (pop.img.height!="" ) {
  23.    clearInterval(pop.intervalCheck);
  24.    setTimeout("pop.resizeImg()",200);
  25.   }
  26.  },
  27.  resizeImg:function() {
  28.   var img=pop.img;
  29.   imgH=parseInt(img.height);
  30.   imgW=parseInt(img.width);
  31.   if (imgH>imgW && imgH>pop.maxH ) {
  32.    img.height=pop.maxH;
  33.    img.width=parseInt(imgW/imgH*pop.maxH);
  34.   } else {
  35.    if (imgW>imgH && imgW>pop.maxW ) {
  36.     img.width=pop.maxW;
  37.     img.height=parseInt(imgH/imgW*pop.maxW);
  38.    }
  39.   }
  40.   pop.win.resizeTo(parseInt(img.width)+10,parseInt(img.height)+50);
  41.  }
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <a href="http://img227.imageshack.us/img227/9743/imbrikfu0.jpg" onclick="pop.open(this);return false">Voir la grande image</a>
  47. <a href="http://abcwallpaper.free.fr/beach004.jpg" onclick="pop.open(this);return false">plage</a>
  48. </body>
  49. </html>

Reply

Marsh Posté le 28-08-2006 à 12:33:03    

cela marche merci mais je ne comprend pas pourquoi la fenetre rogne toujours l'image en bas a droite????

Reply

Marsh Posté le 28-08-2006 à 12:36:46    

cela dépend des navigateurs et dans ce cas faut se lancer dans un calcul un peu plus warrior [:spamafote]

Reply

Marsh Posté le 28-08-2006 à 12:53:56    

bah sa me fais pareil avec firefox qu'avec i-e

Reply

Marsh Posté le 28-08-2006 à 19:18:56    

mon script ne tournera exclusivemtent sous inernet explorer (j'ai pas le choix  :(  ), donc si tu peut m'aider a améliorer ton script qui est deja bien.  :hello:

Reply

Marsh Posté le 29-08-2006 à 13:37:43    

Je pense que si tu lui demande gentillement il viendra même te torcher le cul :o
 
:whistle:


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 30-08-2006 à 10:25:10    

Code :
  1. <script type="text/javascript">
  2.     pop={
  3.         maxH:800, maxW:800,
  4.         obj:null,win:null,img:null,intervalCheck:null,
  5.         open:function(link) {
  6.             pop.obj=link;
  7.             pop.win=window.open("page/popup.html","_blank","width="+(pop.maxW)+",height="+(pop.maxH)+",scrollbars=no,status=no,resizable=yes" );
  8.         },
  9.         makeImg:function() {
  10.             if (!pop.win) return;
  11.             var img=pop.win.document.getElementById("myImg" );
  12.             pop.img=img;
  13.             img.src = pop.obj.href;
  14.             pop.intervalCheck=setInterval("pop.checkimgSize()",200);
  15.         },
  16.         checkimgSize:function() {
  17.             if (pop.img.height!="" ) {
  18.                 clearInterval(pop.intervalCheck);
  19.                 setTimeout("pop.resizeImg()",200);
  20.             }
  21.         },
  22.         resizeImg:function() {
  23.             var img=pop.img;
  24.             imgH=parseInt(img.height);
  25.             imgW=parseInt(img.width);
  26.             if (imgH>imgW && imgH>pop.maxH ) {
  27.                 img.height=pop.maxH;
  28.                 img.width=parseInt(imgW/imgH*pop.maxH);
  29.             } else {
  30.                 if (imgW>imgH && imgW>pop.maxW ) {
  31.                     img.width=pop.maxW;
  32.                     img.height=parseInt(imgH/imgW*pop.maxW);
  33.                 }
  34.             }
  35.             pop.win.resizeTo(parseInt((img.width+30)),parseInt((img.height+80)));
  36.         }
  37.     }
  38. </script>


 
j'ai resolu le probléme en ajoutant des "marges" (derniére ligne), sa marche sous i-e, firefox, opera, nescape
 
Deplus il y a des moyen plus polie de dire que je peut me debrouillez un peu tout seul (Dj YeLL) :non: , merci Gatsu35 pour ton aide

Reply

Marsh Posté le 30-08-2006 à 10:45:43    

Rho j'ai mis les smileys et tout et tout pourtant :D


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed