PHPfrance

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

popup dimensionner qui garde les proportion de l'image

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 : popup dimensionner qui garde les proportion de l'image

par Overseas » 17 nov. 2005, 00:02

Merci Cyrano,

effectivement, le popup est de nouveau proposé... :D

Cependant, le transfert d'URL de l'image ne marche pas (cela ne marche que dans le cas, comme dans ton exemple, d'un lien en dur)
On voit ci-dessous le transfert de la variable mypic qui contient "../pic/deco/rod_ford36.jpg"
Si je mets le contenu de mypic dans <img src= , ça marche...

Et bizarrement ce n'est pas un popup en fait, mais une nouvelle fenêtre en plein écran...

Je sens pourtant qu'il s'en faut de peu... :)

Code : Tout sélectionner

function PopupImage(mypic,salargeur,sahauteur) [...] w.document.write("<body onload=\"checksize()\" style=\"margin: 0px;\">\n"); w.document.write("<p style=\"margin: 0; padding: 0\"><a href=\"#\" onclick=\"window.close();\" onmousedown=\"window.close();\"><img src=mypic style=\"border: none;\" ><\/a><\/p>\n"); w.document.write("<\/body>\n");
Edit : je viens de faire des essais sur la dimension de la popup (que je devrais d'ailleurs dimensionner avant de la charger, soit dit en passant... et je constate que le script ne tiens pas compte de la variable mypic...
Le lien de l'image devient http://www.monsite.com/dir_du_php/mypic ! :oops:
Il devrait être : http://www.monsite.com/pic/deco/rod_ford36.jpg

gênant ! :x

par Cyrano » 16 nov. 2005, 22:19

Le problème est probablement dans ton gestionnaire d'évènement. VÉrifie donc le code source généré. Proposition de correction: 
<?php
//   Naturellement, $illus sera en vrai chargé avec une récup' de la base
$illus = "rod_ford36.jpg"  ;
$pathpic = "../pic/deco/".$illus  ;
list($width, $height, $type) = getimagesize($pathpic) ;     //  Largeur - Hauteur et type d'image (1 = GIF / 2 = JPG)
if ($width > 180)
{
    if ($height > 180)
    {
        if ($height > $width)
        {
            $tmp_w = intval(180/($height/$width))  ;
            $tmp_h = 180  ;
        }
        else
        {
            $tmp_w = 180  ;
            $tmp_h = intval(180/($width/$height))  ;
        }
    }
    else
    {
        $tmp_w = 180  ;
        $tmp_h = intval($height/($width/180))  ;
    }
}
else
{
    if ($height > 180)
    {
        $tmp_w = intval($width/($height/180))  ;
        $tmp_h = 180  ;
    }
    else
    {
        $tmp_w = $width  ;
        $tmp_h = $height  ;
    }
}
?>
<a href="#" style="border: none" title="Image agrandie" onclick="PopupImage('<?php echo($pathpic); ?>', '<?php echo($tmp_w); ?>', '<?php echo($tmp_h); ?>');"><img src="<?php echo($pathpic); ?>" width="<?php echo($tmp_w); ?>" height="<?php echo($tmp_h); ?>" border="0"></a>

par Overseas » 16 nov. 2005, 20:14

Bonjour,

j'adore le code de Cyrano, c'est exactement ce dont j'ai besoin.
Par contre, en l'adaptant à mon besoin, il ne marche plus (il n'ouvre pas de popup :cry: ), et je ne suis pas assez calé pour voir d'où ca vient.
Une idée ?

Code : Tout sélectionner

function PopupImage(img,salargeur,sahauteur) { var titre=":: ZOOM ::"; var w = open("", 'image', 'top='+(screen.availHeight/2-300)+', left='+(screen.availWidth/2-300)+', width=salargeur, height=sahauteur, toolbar=no, scrollbars=no, resizable=no'); w.document.write("<html>\n"); w.document.write("<head>\n"); w.document.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" \/>\n"); w.document.write("<title>:: ZOOM ::<\/title>\n"); w.document.write("<meta http-equiv=\"imagetoolbar\" content=\"no\" \/>\n"); w.document.write("<script type=\"text\/javascript\">\n"); w.document.write("\/* <![CDATA[ *\/\n"); w.document.write("function checksize()\n"); w.document.write("{\n"); w.document.write(" if(document.images[0].complete)\n"); w.document.write(" {\n"); w.document.write(" if (document.images[0].width > 600) {\n"); w.document.write(" if (document.images[0].height > 600) {\n"); w.document.write(" if (document.images[0].height > document.images[0].width) {\n"); w.document.write(" tmp_zw = intval(600/(document.images[0].height/document.images[0].width)) ;\n"); w.document.write(" tmp_zh = 600 ;\n"); w.document.write(" }\n"); w.document.write(" else {\n"); w.document.write(" tmp_zw = 600 ;\n"); w.document.write(" tmp_zh = intval(600/(document.images[0].width/document.images[0].height)) ;\n"); w.document.write(" }\n"); w.document.write(" }\n"); w.document.write(" else {\n"); w.document.write(" tmp_zw = 600 ;\n"); w.document.write(" tmp_zh = intval(document.images[0].height/(document.images[0].width/600)) ;\n"); w.document.write(" }\n"); w.document.write(" }\n"); w.document.write(" else {\n"); w.document.write(" if (document.images[0].height > 600) {\n"); w.document.write(" tmp_zw = intval(document.images[0].width/(document.images[0].height/600)) ;\n"); w.document.write(" tmp_zh = 600 ;\n"); w.document.write(" }\n"); w.document.write(" else {\n"); w.document.write(" tmp_zw = document.images[0].width ;\n"); w.document.write(" tmp_zh = document.images[0].height ;\n"); w.document.write(" }\n"); w.document.write(" }\n"); w.document.write(" window.resizeTo(tmp_zw+24,tmp_zh+54);\n"); w.document.write(" window.focus();\n"); w.document.write(" }\n"); w.document.write(" else\n"); w.document.write(" {\n"); w.document.write(" setTimeout('check()',250);\n"); w.document.write(" }\n"); w.document.write("}\n"); w.document.write("\/\/]]>\n"); w.document.write("<\/script>\n"); w.document.write("<\/head>\n"); w.document.write("<body onload=\"checksize()\" style=\"margin: 0px;\">\n"); w.document.write("<p style=\"margin: 0; padding: 0\"><a href=\"#\" onclick=\"window.close();\" onmousedown=\"window.close();\"><img src=\"<?php echo $pathpic ; ?>\" style=\"border: none;\" ><\/a><\/p>\n"); w.document.write("<\/body>\n"); w.document.write("<\/html>\n"); w.document.close(); } 
    //   Naturellement, $illus sera en vrai chargé avec une récup' de la base
    $illus = "rod_ford36.jpg"  ;
    $pathpic = "../pic/deco/".$illus  ;
         list($width, $height, $type) = getimagesize($pathpic) ;     //  Largeur - Hauteur et type d'image (1 = GIF / 2 = JPG)
         if ($width > 180)  {
             if ($height > 180)  {
                 if ($height > $width)  {
                     $tmp_w = intval(180/($height/$width))  ;
                     $tmp_h = 180  ;
                 }
                 else  {
                     $tmp_w = 180  ;
                     $tmp_h = intval(180/($width/$height))  ;
                 }
             }
             else {
                 $tmp_w = 180  ;
                 $tmp_h = intval($height/($width/180))  ;
             }
         }
         else {
             if ($height > 180)  {
                 $tmp_w = intval($width/($height/180))  ;
                 $tmp_h = 180  ;
             }
             else {
                 $tmp_w = $width  ;
                 $tmp_h = $height  ;
             }
         }
    echo "<a href='#' style='border: none' title='Image agrandie' onclick='PopupImage(".$pathpic.",".$tmp_w.",".$tmp_h.")'><img src=".$pathpic." width=".$tmp_w." height=".$tmp_h." border=0></a>"  ;

par Invité » 28 sept. 2005, 15:39

plutot comme ça

Code : Tout sélectionner

echo "<td width=%><A href=javascript:PopupImage('../../images/produit/$code.jpg')><img src='../../images/produit/$code.jpg' height=50 border=0></a>";

par Invité » 28 sept. 2005, 15:37

j'arrive pas a adapté mon liens avec le liens de ton script,voila mon liens origine
							echo "<td width=%><A href=javascript:PopupImage('../../images/produit/$code.jpg')><img src='../../images/produit/$code.jpg' height=50 border=0></a>";

par Invité » 28 sept. 2005, 15:26

merci beaucoup

par Cyrano » 28 sept. 2005, 15:09

Tiens, un script complet avec ce que tu veux faire, tu auras juste à ajuster les dimensions des images à cliquer: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function PopupImage(img)
{
   var titre=":: ZOOM ::";
   var w = open("", 'image', 'top='+(screen.availHeight/2-200)+', left='+(screen.availWidth/2-200)+', width=300, height=400, toolbar=no, scrollbars=no, resizable=no');
   w.document.write("<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\n");
   w.document.write("<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n");
   w.document.write("<head>\n");
   w.document.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" \/>\n");
   w.document.write("<title>:: ZOOM ::<\/title>\n");
   w.document.write("<meta http-equiv=\"imagetoolbar\" content=\"no\" \/>\n");
   w.document.write("<script type=\"text\/javascript\">\n");
   w.document.write("\/* <![CDATA[ *\/\n");
   w.document.write("function checksize()\n");
   w.document.write("{\n");
   w.document.write("    if(document.images[0].complete)\n");
   w.document.write("    {\n");
   w.document.write("       window.resizeTo(document.images[0].width+10,document.images[0].height+53);\n");
   w.document.write("       window.focus();\n");
   w.document.write("    }\n");
   w.document.write("    else\n");
   w.document.write("    {\n");
   w.document.write("        setTimeout('check()',250);\n");
   w.document.write("    }\n");
   w.document.write("}\n");
   w.document.write("\/\/]]>\n");
   w.document.write("<\/script>\n");
   w.document.write("<\/head>\n");
   w.document.write("<body onload=\"checksize()\" style=\"margin: 0px;\">\n");
   w.document.write("<p style=\"margin: 0; padding: 0\"><a href=\"#\" onclick=\"window.close();\" onmousedown=\"window.close();\"><img src=\".\/images\/grandes\/blouson_petitgris.jpg\" style=\"border: none;\" height=\"350\" alt=\"\" \/><\/a><\/p>\n");
   w.document.write("<\/body>\n");
   w.document.write("<\/html>\n");
   w.document.close();
}
/*]]>*/
</script>
  </head>
  <body>
    <p class="padding: 0"><a href="./grande_image.html" style="border: none" title="Image agrandie" onclick="PopupImage('.\/images\/grandes\/blouson_petitgris.jpg'); return false;"><img src="./images/vignettes/blouson_petitgris.jpg" style="width: 94px; height: 120px; border: none"alt="" /></a></p>
  </body>
</html>
Testé ;)

par heddicmi » 28 sept. 2005, 14:36

Tu veux que la popup soit plus où moins grande suivant la taille de l'image, sans dépasser une certaine taille maximum ? C'est ça ?

Si c'est ça, sache que tu rêgles la taille de ta popup là où tu as width=250,height=350... Tu peux récupérer la taille de l'image pour te caler dessus...

popup dimensionner qui garde les proportion de l'image

par Invité » 28 sept. 2005, 13:50

bonjours a tous j'aimerai que mon popup a qui je donne une taille limite garde les proportion de mon image, merci de votre aide.

Code : Tout sélectionner

<SCRIPT LANGUAGE="JavaScript"> function PopupImage(img) { titre=":: ZOOM ::"; w=open("",'image','top='+(screen.availHeight/2-200)+',left='+(screen.availWidth/2-200)+',width=250,height=350,toolbar=no,scrollbars=no,resizable=no'); w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>"); w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+5,document.images[0].height+30); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>"); w.document.write("<BODY onload='checksize()' oncontextmenu='return false' ondragstart='return false' onselectstart='return false' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><meta http-equiv=imagetoolbar content=no /><a href='#' onClick='window.close()'><IMG src='"+img+"' border=0' height=350) >"); w.document.write(""); w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>"); w.document.write("</BODY></HTML>"); w.document.close(); } </SCRIPT>