Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

popup dimensionner qui garde les proportion de l'image

https://forum.phpfrance.com/viewtopic.php?f=7&t=8944

Page 1 sur 1

popup dimensionner qui garde les proportion de l'image

Posté : 28 sept. 2005, 13:50
par Invité
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>

Posté : 28 sept. 2005, 14:36
par heddicmi
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...

Posté : 28 sept. 2005, 15:09
par Cyrano
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é ;)

Posté : 28 sept. 2005, 15:26
par Invité
merci beaucoup

Posté : 28 sept. 2005, 15:37
par Invité
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>";

Posté : 28 sept. 2005, 15:39
par Invité
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>";

Posté : 16 nov. 2005, 20:14
par Overseas
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>"  ;

Posté : 16 nov. 2005, 22:19
par Cyrano
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>

Posté : 17 nov. 2005, 00:02
par Overseas
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
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/