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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question HTML image auto resize

    I think i have tried every possible way i know to do this.

    basically images are inserted later via a csv and are all different sizes nd i am trying to make a template set the max-width or just the width so the image downsizes automatically on the screen.

    its using ebay listing template restrictions btw so always fun!!

    SUGGESTIONS PLEASE!

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Are you putting this on ebay? If so you cannot use PHP.

    ##Edit

    Here is an example of auto image resize using JS

    http://dev.tempz.webatu.com/resize-test/
    Last edited by tempz; 12-12-2012 at 03:46 PM.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I cannot see the link as its blocked by workplace network.

    I am tying to use just HTML to acheive this and have tried via css.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by Mr Chappell View Post
    I cannot see the link as its blocked by workplace network.

    I am tying to use just HTML to acheive this and have tried via css.
    Oh wow, okay no problem.

    Try this source code.


    Code:
    <html>
    <head>
    <script type="text/javascript">
    function ResizeThem()
    {
      var maxheight = 150;
      var maxwidth = 150;
      var imgs = document.getElementsByTagName("img");
      for ( var p = 0; p < imgs.length; p++ )
      {
        if ( imgs[p].getAttribute("alt") == "user posted image" )
        {
          var w = parseInt( imgs[p].width );
          var h = parseInt( imgs[p].height );
          if ( w > maxwidth )
          {
            imgs[p].style.cursor = "pointer";
            imgs[p].onclick = function( )
            {
              var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
              iw.focus();
            };
            h = ( maxwidth / w ) * h;
            w = maxwidth;
            imgs[p].height = h;
            imgs[p].width = w;
          }
          if ( h > maxheight )
          {
            imgs[p].style.cursor="pointer";
            imgs[p].onclick = function( )
            { 
              var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
              iw.focus( );
            };
            imgs[p].width = ( maxheight / h ) * w;
            imgs[p].height = maxheight;
          }
        }
      }
    }
    </script>
    </head>
    <body onLoad="ResizeThem()">
    
    <h1> Example of JavaScript Auto Image Resize </h1>
    
        <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image"/>
        <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
        <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image"/>
    <p> Click image to enlarge </p>    
    </body>
    </html>

  • Users who have thanked tempz for this post:

    Mr Chappell (12-14-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    like the idea how do i define this to either a set table or div cat coz surly if i just stick in main body it will try resize all images inside template.

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    no, if you look at the images and the "alt"

    Any images with alt:
    Code:
    alt="user posted image"/
    It will resize them.

    if they don't have it, no resize

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is were we have a problem. the image in the code is down as {{IMAGECHOOSER(T)}} which is then populated by our channel via a upload sheet. ive been thinking with this system but is not able to add alt text during this process.

    could this
    if ( imgs[p].getAttribute("alt") == "user posted image" )

    be changed to this

    if ( imgs[p].getAttribute("alt") == "{{IMAGECHOOSER(T)}}" )

    would that work??

  • #8
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    No it wouldn't work.

  • #9
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well anyway round this?

  • #10
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Right. sorted this now did a bit of a work around. used the script as described and just split any larger images up in to several images so non were over the max width. worked a treat.


  •  

    Posting Permissions

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