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.

Code:

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:

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:

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:

PHP Code:


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

popup.js code:

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