Solved

Dynamically resizing image to Max height/width

Posted on 2006-07-12
5
316 Views
Last Modified: 2008-03-17
Hello.

I want to resize an image that is displayed with JavaScript.

   Here is some code that should do what I need done:
   http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21917056.html

            function resize(image) {
              // Thanks, GrandSchtroumpf
              var maxwidth = 200;
              var maxheight = 100;
              var scalewidth = 1;
              var scaleheight = 1;
              if (image.width > maxwidth)  scalewidth = maxwidth/image.width;
              if (image.height > maxheight)  scaleheight = maxheight/image.height;
              var scale = (scalewidth < scaleheight)? scalewidth : scaleheight;
              image.width = Math.round(scale * image.width);
              image.height = Math.round(scale * image.height);
            }

Here is the JS that I need it integrated with:

               <script>
      var par = window.parent.document;
      var images = par.getElementById('images');
      var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
      var image = imgdiv.getElementsByTagName('img')[0];
      imgdiv.removeChild(image);
      var image_new = par.createElement('img');
      image_new.src = 'showimage.php?pic=<?=$oname?>';
      image_new.className = 'loaded';
      imgdiv.appendChild(image_new);
      </script>



Any ideas?

Thanks!
0
Comment
Question by:hankknight
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 500 total points
ID: 17094476
you can try something like this:
...
     var image_new = par.createElement('img');
     image_new.onload = function() { resize(this); };
     image_new.src = 'showimage.php?pic=<?=$oname?>';
...
0
 
LVL 16

Author Comment

by:hankknight
ID: 17094643
Thanks!
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17094672
You are welcome  :)
0
 
LVL 16

Author Comment

by:hankknight
ID: 17094701
By the way, I have posted a related but different question here:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21917309.html
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17094765
wow, seems like you really want me to get a certification in javascript ;)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now