dynamic popup size from image size

SeenGee

i have a section on a site that provides an events listing for a club night, for each night there is a flyer that is uploaded through a cms that i have built. The problem is that these flyers are all different sizes, some are landscape and some are portrait. the client wants these flyers to open in a popup. elsewhere in my site i use this script for a popup:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, \'" + id + "\', \'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=0,width=500,height=600,left = 326,top = 132\');");
}
// End -->
</script>

and for the link:

<a href="javascript:popUp(\'biog.php?crew_id='.$dj_id.'\')">

this is contained in a functions page that i include in all other pages and which acts as a template. is there any way that i can dynamically size the popup for the flyer wihtout passing additonal arguments to the function that contains the popup script, i.e. a popup script that can be run inside a script as opposed to inside the head tags and therefore having to be passed to my functions page.

Thanks.

Chrisskidmore

I hate javascript but in your new window could you use php to get the image size and then do a
window.resize routine in the new window?

ShawnK

Try this:

<?php

$img_width     =  imagesx($img_filename);
$img_height    =  imagesy($img_filename);

?>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',  'toolbar=0,scrollbars=1,location=0,statusbar=1,me
nubar=0,resizable=0,width=<? echo $img_width ?>,height=<? echo $img_height ?>,left = 326,top = 132');");
}
// End -->
</script>

imagesx returns the width of $img_filename
and
imagesy returns the height of $imagefilename

You could also use getimagesize() which returns an array that I THINK contains height, width, filetype, but the part you would like is that it also has a text string that's something like:

height="" width=""

getimagesize()

SeenGee

i'm using this code:

$size = getimagesize("http://localhost/path/to/image.jpg");
$img_width=$size[0];
$img_height=$size[1];
<body bgcolor="#980000" onload="window.resizeTo('.$img_width.', '.$img_height.')">

This kinda works but the image when displayed is bigger than the popup, seems that it is taking the size of the whole popup into consideration rather than the available canvas within the popup, how can i adjust the code to take window.avail (??) into account?

Thanks.

Chrisskidmore

$img_width=$size[0] + 20;
$img_height=$size[1] + 20;

zapa

Open a window with the right dimension for an image
<script language='javascript'>
function display(myimage) {
 html = "<HTML><HEAD><TITLE>Photo</TITLE>" +
  "</HEAD><BODY LEFTMARGIN=0 " +
  "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER>" +
  "<IMG SRC='" + myimage + "' BORDER=0 NAME=image " +
  "onload='window.resizeTo(document.image.width,document.image.height)'></CENTER>" +
  "</BODY></HTML>";
 popup=window.open
   ('','image','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=1');
 popup.document.open();
 popup.document.write(html);
 popup.document.focus();
 popup.document.close()
 };
</script>


Use it this way : <a href="javascript:display('../images/jsht.gif')">Javascript HowTo 1</a>
<a href="javascript:display('../images/jsht2.gif')">Javascript HowTo 2</a>

this works good if you add :

"onload='window.resizeTo(document.image.width + 50,document.image.height + 70)'>

this will give you extra space on the window if you want to put a close button of text.