Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    determine image size automatically/dynamically

    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?

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

    ?

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep, something like that alright. But with one minor change.

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

    david_kw
    Last edited by david_kw; 12-21-2006 at 04:57 AM.

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by moleculezz; 04-24-2007 at 12:45 AM.

  • #8
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind guys.. I have found a solution for this in php.

    Thanks anyways


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •