...

View Full Version : determine image size automatically/dynamically



bugster
12-20-2006, 05:50 PM
Does anyone know of a quick and dirty (maybe not dirty) method of using javascript to determine the dimensions of an image? I want to have a popup of an image, but i want the popup window to be the size of the image without having to specify the image's size manually in the <img> tag.

Any ideas?

david_kw
12-20-2006, 06:11 PM
Here is a function I've used before. It looks a bit odd since initially when it opens the window is small then resizes it once the images is loaded and the width and height are available. It also closes the window when it loses focus so you don't start getting windows cluttered all over.



function view_jpg(jpg_url, title_str)
{
html_src = "<html><title>" + title_str + "</title><style>body{margin:5px 0px 0px 0px}</style><body onBlur='top.close()'><center><img src='"+ jpg_url +"' border=0 name=view_jpg onLoad='window.resizeTo(document.view_jpg.width+20,document.view_jpg.height+44)' onClick='self.close()'></center></body></html>";

popup_win=window.open('','','scrollbars=no,toolbar=no,width=1,height=1');
popup_win.document.open();
popup_win.document.write(html_src);
popup_win.document.close();
}


Thinking about it this could probably be rewritten to preload the image. As is, I think it likely falls under the quick and dirty heading though. :)

david_kw

bugster
12-21-2006, 01:41 AM
Thanks david. Im looking into this function now and will test it out. How did you call this in the html though? something like:


<a href="#" onClick="view_jpg('image.jpg', 'title here')";>click me</a>

?

david_kw
12-21-2006, 03:53 AM
Yep, something like that alright. But with one minor change.

<a href="#" onClick="view_jpg('image.jpg', 'title here');">click me</a>

david_kw

bugster
12-22-2006, 07:17 PM
just a followup for completeness, i ended up doing something different than what david suggested. Here's what i did, it seems to work well:


Javascript code:

function popPreview ( image, width, height ){
lrgewin=window.open("about:blank","","height="+width+",width="+height+",status=no,titlebar=yes")
imagename=image;
setTimeout('update()',500);
}

function update() {

doc=lrgewin.document;
doc.open('text/html');
doc.write('<HTML><HEAD><TITLE>Enlarged Image<\/TITLE><\/HEAD><BODY bgcolor="white" onLoad="if (self.resizeTo)self.resizeTo((document.images[0].width+10),(document.images[0].height+80))" topmargin="4" leftmargin="0" rightmargin="0" bottommargin="0"><table width="' + document.images[0].width + '" border="0" cellspacing="0" cellpadding="0"><tr><td>');
doc.write('<IMG SRC="' + imagename + '"><\/td><\/tr><tr><td><form name="viewn"><input type="image" src="images/close.gif" align="right" value="Close Window" onClick="self.close()"><\/td><\/tr><\/table>');
doc.write('<\/form><\/BODY><\/HTML>');
doc.close();
}


HTML code:

<a id="someID" class="caption" Href="#" onclick="popPreview('yourImage.jpg', 350, 500)">Click to preview</a>

bugster
12-22-2006, 08:24 PM
the dimensions that you see are just the initial window size. Once the image is loaded (<1 second later), the window automatically resizes to fit the image.

moleculezz
04-23-2007, 11:43 PM
Hello,
I have a question regarding this code. Because I'm not sure the solution posted will work with what I have.
It's a mix of PHP and JS.
will the function be able to run php code?

main.php code:

<a href="javascript:popUp(\'pop.php?img='.$image.'\')"><img src="gfx/flyers/'.$row['imagethmb'].'"></a>

popup.js code:

function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,resizable=0,left = 55,top = 15');");
}

pop.php code:

<?php $image = $_GET['img']; ?>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
body { margin:0; padding:0; }
-->
</style>
</head>

<body>
<?php echo '<img src="gfx/flyers/'.$image.'" />'; ?>
</body>
</html>

moleculezz
04-24-2007, 01:55 AM
Nevermind guys.. I have found a solution for this in php.

Thanks anyways ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum