SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Show only 100px square portion of an image?

    Hello,

    I'm not entirely sure javascript is the route for this, but I can't seem to figure out another way. Basically, what I'm trying to achieve is create a 100px by 100px square thumbnail of an image that can be clicked on to display the actual, full sized image. Now, the problem is, the full sized images are people uploaded by any visitor to the site, so they won't always be perfect squares where I would be able to just define a width and height. In order to keep with the layout, I need the 100px by 100px thumbnail, so I'm wondering what would be the best way to acheive this when all the uploaded full sized images may not be perfect squares where they could jsut be resized.

    If you're still not sure what I mean, here's a quick example:

    A user uploads a picture that is 1200x983px, but the thumbnail for this picture must be 100x100px. If I were to just do something like <img height="100px" width="100px" />, the image would be all distorted since a perfectly square photo was not used, and if I were to just define a width of 100px only, the height may not be 100px.

    Thanks,

    Elementax

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .thumb {
      position:relative;width:100px;height:100px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div class="thumb" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="263" height=351"/>
    </div>
    <div class="thumb" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" width="263" height=351"/>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ResizeThumbs(cls,sz){
     var ds=document.getElementsByTagName('DIV'),a,img,z0=0;
     for (;z0<ds.length;z0++){
      img=ds[z0].getElementsByTagName('IMG')[0];
      if (img&&(' '+ds[z0].className+' ').match(' '+cls+' ')){
       a=[img,ds[z0],new Image(),sz];
       a[2].src=img.src;
       ResizeLoad(a)
      }
     }
    
    }
    
    function ResizeLoad(a){
     if (a[2].width<40){
      a[4]=setTimeout(function(){ ResizeLoad(a); },200);
     }
     else {
      var w=a[2].width,h=a[2].height,ra=w>=h?['height','width',a[3]/h,h,w,'left','top']:['width','height',a[3]/w,w,h,'top','left'];
      a[0].style[ra[0]]=ra[3]*ra[2]+'px';
      a[0].style[ra[1]]=(ra[3]*ra[2])*ra[4]/ra[3]+'px';
      a[0].style.position='absolute';
      a[1].style.overflow='hidden';
      a[0].style[ra[5]]=(a[3]-a[0][ra[1]])/2+'px';
      a[0].style[ra[6]]='0px';
     }
    }
    
    ResizeThumbs('thumb',100);
    /*]]>*/
    </script>
    </body>
    
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vwphillips View Post
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .thumb {
      position:relative;width:100px;height:100px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div class="thumb" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="263" height=351"/>
    </div>
    <div class="thumb" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg" width="263" height=351"/>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ResizeThumbs(cls,sz){
     var ds=document.getElementsByTagName('DIV'),a,img,z0=0;
     for (;z0<ds.length;z0++){
      img=ds[z0].getElementsByTagName('IMG')[0];
      if (img&&(' '+ds[z0].className+' ').match(' '+cls+' ')){
       a=[img,ds[z0],new Image(),sz];
       a[2].src=img.src;
       ResizeLoad(a)
      }
     }
    
    }
    
    function ResizeLoad(a){
     if (a[2].width<40){
      a[4]=setTimeout(function(){ ResizeLoad(a); },200);
     }
     else {
      var w=a[2].width,h=a[2].height,ra=w>=h?['height','width',a[3]/h,h,w,'left','top']:['width','height',a[3]/w,w,h,'top','left'];
      a[0].style[ra[0]]=ra[3]*ra[2]+'px';
      a[0].style[ra[1]]=(ra[3]*ra[2])*ra[4]/ra[3]+'px';
      a[0].style.position='absolute';
      a[1].style.overflow='hidden';
      a[0].style[ra[5]]=(a[3]-a[0][ra[1]])/2+'px';
      a[0].style[ra[6]]='0px';
     }
    }
    
    ResizeThumbs('thumb',100);
    /*]]>*/
    </script>
    </body>
    
    </html>
    Wow, thanks a lot, it works great.


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
  •