popup dimensionner qui garde les proportion de l'image

Invité
Invité n'ayant pas de compte PHPfrance

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>

Mammouth du PHP | 568 Messages

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...
Heddi s'est remis à développer pour lui même !
Martina Hingis - Étoile du Tennis
Heddi v. 2007

Mammouth du PHP | 19672 Messages

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é ;)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Invité
Invité n'ayant pas de compte PHPfrance

28 sept. 2005, 15:26

merci beaucoup

Invité
Invité n'ayant pas de compte PHPfrance

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>";

Invité
Invité n'ayant pas de compte PHPfrance

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>";

Eléphanteau du PHP | 30 Messages

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>"  ;

Mammouth du PHP | 19672 Messages

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>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 30 Messages

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