Results 1 to 7 of 7

Thread: Resize Image

  1. #1
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resize Image

    Hi Guys

    Just wondering if anyone can help me with my problem.

    I want my image to resize, whether the window was dragged vertically or horizontally.

    more clearer example: http://www.mickkmg.com

    the image on the centre, when you pull your window in from the bottom or side, it will resize.

    how would i apply this to any images?

    many thanks

    SD

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ResizeImage(id,r){
     var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.clientHeight:document.body.clientWidth*document.body.clientHeight;
     document.getElementById(id).style.width=Math.max(ww/r,50)+'px';
    }
    
    
    window.onresize=function(){
     ResizeImage('tst',2000);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    ResizeImage('tst',2000);
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks Vic

    would it be possible to run the same script but with image class rather than ID?

    Also i need to embed this in a php file, which has image classes rather than ID.

    many thanks for your help!

    cheers
    Last edited by suryadee; 06-20-2012 at 04:25 AM.

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by suryadee View Post
    thanks Vic

    would it be possible to run the same script but with image class rather than ID?

    Also i need to embed this in a php file, which has image classes rather than ID.

    many thanks for your help!

    cheers
    In answer, getElementByClassName is supported by most recent major browsers.
    Bernie

  5. #5
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bernie1227 View Post
    In answer, getElementByClassName is supported by most recent major browsers.
    Bernie
    Thanks Bernie, would it be right to line the code like this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/

    function ResizeImage(className,r){
    var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c lientHeight:document.body.clientWidth*document.body.clientHeight;
    document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';
    }



    window.onresize=function(){
    ResizeImage('tst',2000);
    }

    /*]]>*/
    </script>

    </head>

    <body>
    <img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

    <script type="text/javascript">
    /*<![CDATA[*/
    ResizeImage('tst',2000);
    /*]]>*/
    </script>
    </body>

    </html>


    cheers

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by suryadee View Post
    Thanks Bernie, would it be right to line the code like this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/

    function ResizeImage(className,r){
    var ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.c lientHeight:document.body.clientWidth*document.body.clientHeight;
    document.getElementByClassName(className).style.width=Math.max(ww/r,50)+'px';
    }



    window.onresize=function(){
    ResizeImage('tst',2000);
    }

    /*]]>*/
    </script>

    </head>

    <body>
    <img class="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />

    <script type="text/javascript">
    /*<![CDATA[*/
    ResizeImage('tst',2000);
    /*]]>*/
    </script>
    </body>

    </html>


    cheers
    Looks alright to me, I'll check it again later, but just for future reference, please contain your code in [CODE] tags.

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ScaleImages(){
     var objs=document.getElementsByTagName('IMAGE'),cls,i,o,img,z0=0,z0a;
     ScaleImages.ary=[];
     for (;z0<objs.length;z0++){
      cls=objs[z0].className;
      if (cls&&cls.indexOf('scale:')>-1){
       cls=cls.split(';');
       o={obj:objs[z0]};
       for (z0a=0;z0a<cls.length;z0a++){
        i=cls[z0a].indexOf(':');
        if (i>2){
         o[cls[z0a].substring(0,i).toLowerCase()]=cls[z0a].substring(i+1);
        }
       }
       if (isFinite(o.scale)){
        ScaleImages.ary.push([o.obj,o.scale]);
       }
      }
     }
     ResizeImage();
    }
    
    function ResizeImage(id,r){
     var ary=ScaleImages.ary,ww=window.innerHeight?window.innerWidth*window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientWidth*document.documentElement.clientHeight:document.body.clientWidth*document.body.clientHeight,z0=0;
     for (;z0<ary.length;z0++){
      ary[z0][0].style.width=Math.max(ww/ary[z0][1],50)+'px';
     }
    }
    
    
    window.onresize=function(){
     ResizeImage();
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:2000;" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="scale:3000;" />
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    ScaleImages();
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

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