944,134 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Auto Image Resize and create thumbs
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Sep 25th, 2007
-1

Auto Image Resize and create thumbs

Expand Post »
Im looking for a code like the one below that automatically resizes posted images to desired size while at the same time the resized images are clickable for full size which opens in another window.
The one below does not work on my forum software, Im looking for a work around/reworking of the code below.
Any help appreciated! Thankyou.

[code]
<script>
function ResizeThem() {
maxheight=300;
maxwidth= 300;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;
}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;
}
}
}
}
</script>

<body onLoad="ResizeThem()">
[code]
Similar Threads
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

You know it'll only work for images that have an alt attribute of 'user posted image' right?

Also, you're not saving a lot by using this code; better, serverside, means of doing this actually decrease the size of the thumbnail image, because that saves on download bandwidth.. this code will download fullsize pictures then put them into little img boxes to make them visually smaller.. but, not smaller in terms of the download itself.

This works for me, I tidied it up abit but it does almost the same things, I changed a bit of the code so that it uses those w and h variables; they weren't being used before. This way, you don't have any need to call parseInt more than twice:
Javascript Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function ResizeThem()
  5. {
  6.   var maxheight = 300;
  7.   var maxwidth = 300;
  8.   var imgs = document.getElementsByTagName("img");
  9.   for ( var p = 0; p < imgs.length; p++ )
  10.   {
  11.     if ( imgs[p].getAttribute("alt") == "user posted image" )
  12.     {
  13.       var w = parseInt( imgs[p].width );
  14.       var h = parseInt( imgs[p].height );
  15.       if ( w > maxwidth )
  16.       {
  17.         imgs[p].style.cursor = "pointer";
  18.         imgs[p].onclick = function( )
  19.         {
  20.           var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
  21.           iw.focus();
  22.         };
  23.         h = ( maxwidth / w ) * h;
  24.         w = maxwidth;
  25.         imgs[p].height = h;
  26.         imgs[p].width = w;
  27.       }
  28.       if ( h > maxheight )
  29.       {
  30.         imgs[p].style.cursor="pointer";
  31.         imgs[p].onclick = function( )
  32.         { 
  33.           var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
  34.           iw.focus( );
  35.         };
  36.         imgs[p].width = ( maxheight / h ) * w;
  37.         imgs[p].height = maxheight;
  38.       }
  39.     }
  40.   }
  41. }
  42. </script>
  43. </head>
  44. <body onLoad="ResizeThem()">
  45.  
  46.     <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image"/>
  47.     <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
  48.     <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image"/>
  49.  
  50. </body>
  51. </html>

most of the changes i made to the JS are just `better practice' things ( indentation, declaring variables, etc ) rather than essential changes. The original code should work fine as long as the images to resize all have that necessary alt attribute..
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

can we do away with the requirement for an alt attribute altogether? so any image posted in img tags will work?
Its still not resizing, see here

http://testmods.5.forumer.com/index....st=0&#entry578

it seems the alt tag is added afterwards?

can we make it focus on images posted in [img] tags?
Last edited by Inny; Sep 25th, 2007 at 12:49 pm.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

Not to mention on a slow internet connection the entire images are downloaded, displayed in their full dimensions and then resized only when the document is _entirely_ loaded (onload will be called only when all the images are downloaded).

Like Matt already mentioned, consider shrinking the images on the server side to save on the client bandwidth and the weird behavior. Better yet, cache the images which have been shrinked or store the shrinked images in a separate location / database table to achieve time efficiency traded against space.

> can we do away with the requirement for an alt attribute altogether? so any image posted in img
> tags will work?
It all depends on the way you are associating your images with the post under consideration. As soon as the user attaches images and posts, the data is sent to the server. The kind of processing you do at the server and the way a post is rendered decides it all.
Last edited by ~s.o.s~; Sep 25th, 2007 at 12:48 pm.
Super Moderator
Featured Poster
Reputation Points: 3241
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,873 posts
since Jun 2006
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

It must be done client side unfortunately as I have no access to the server as such, however bandwidth is unlimited and I want to use this primarily for preventing stretching of a post by large images, rather than image file size.

Example of the page in question, not sure if this helps?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!--Begin Msg Number 573-->
  2.     <table width='100%' border='0' cellspacing='1' cellpadding='3'>
  3.     <tr>
  4.       <td valign='middle' class='row4' width="1%"><a name='entry573'></a><span class='normalname'><a href='http://testmods.5.forumer.com/index.php?showuser=1'>Mrstest</a></span></td>
  5.         <td class='row4' valign='top' width="99%">
  6.  
  7.  
  8.  
  9.         <!-- POSTED DATE DIV -->
  10.  
  11.         <div align='left' class='row4' style='float:left;paddingtop:4px;padding-bottom:4px'>
  12.         <span class='postdetails'><b><a title="Show the link to this post" href="#" onclick="link_to_post(); return false;" style="text-decoration:underline">Posted:</a></b>
  13. Yesterday at 07:06 am</a> ) Thanks For visiting Testmods! </span>
  14.         </div>
  15.  
  16.  
  17.         <!-- REPORT / DELETE / EDIT / QUOTE DIV -->
  18.  
  19.         <div align='right'>
  20.         <!--TEMPLATE: skin_topic, Template Part: report_link-->
  21. <a href='http://testmods.5.forumer.com/index.php?act=report&amp;f=1&amp;t=158&amp;p=573&amp;st=0'><img src='style_images/1/p_report.gif' border='0'  alt='Report Post' /></a><a href="http://testmods.5.forumer.com/index.php?act=Post&amp;CODE=08&amp;f=1&amp;t=158&amp;p=573&amp;st=0"><img src='style_images/1/p_edit.gif' border='0'  alt='Edit Post' /></a>  <a href='{ibf.script_urlact=Post&amp;CODE=06&amp;f=1&amp;t=158&amp;p=573'><img src='style_images/1/p_quote.gif' border='0'  alt='Quote Post' /></a>
  22.       </div>
  23.  
  24.  
  25.     </tr>
  26.     <tr>
  27.       <td valign='top' class='post2'>
  28. <a href="javascript:expandcollapse('573')">
  29.    [+/-] show/hide user profile</a>
  30.  
  31. <span class="posthidden" id="573">
  32.  
  33.  
  34.  
  35.  
  36.  <span class='postdetails'>
  37.         <img src='http://testmods.5.forumer.com/html/avatars/abra1.gif' border='0' alt='' /><br /><br />
  38.         Mrs Doubtfire<br /><br />
  39.         <img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><br /><br />
  40.         Group: Admin<br />
  41.         Posts: 229<br />
  42.         Member No.: 1<br />
  43.         Joined: April 08, 2006<br />
  44.          <img src='http://www.filelodge.com/files/room20/525867/Flags/as.gif'>
  45. <br />
  46.          </span><br />
  47.  
  48.  
  49. </span>
  50.  
  51.  
  52.  
  53.         <!--$ author[field_1]-->
  54.  
  55.  
  56.  
  57.         <img src='style_images/1/spacer.gif' alt='' width='160' height='1' /><br /> 
  58.  
  59.       </td>
  60.       <td width='100%' valign='top' class='post2'>
  61.         <!-- THE POST 573 -->
  62.  
  63. <div class="header" style="width:500px; height:2px; overflow:auto;"></div> 
  64. <div class="container" style="width:500px; overflow:auto; height:200px;/*this becomes the editable height*/"> 
  65. <table border="0">
  66.  
  67. <tr>
  68. <td>
  69.  
  70.  <div class='postcolor'>  <img src='http://www.mass.gov/envir/forest/images/multiLayerForest.jpg' border='0' alt='user posted image' />  <br /><br /><span class='edit'>This post has been edited by <b>Mrstest</b> on Today at 05:18 am</span> </div>
  71.         <filter:dropshadow><!--TEMPLATE: skin_global, Template Part: signature_separator-->
  72. <br /><br />--------------------<br />
  73. <div class='signature'>A Sig<br /><img src='http://www.google.com.au/intl/en_au/images/logo.gif' border='0' alt='user posted image' /></div></filter>
  74.  
  75. </td>
  76. </tr>
  77. </table></div> 
  78. <div class="footer" style="width:500px; height:2px; overflow:auto;"></div> 
  79.  
  80.  
  81.         <!-- THE POST -->
  82. </td>
  83.     </tr>
  84.     <tr>
  85.       <td class='darkrow3' align='left'><b><!--TEMPLATE: skin_topic, Template Part: ip_show-->
  86. <span class='desc'>IP: [ ---------- ]</span></b></td>
  87.       <td class='darkrow3' nowrap="nowrap" align='left'>
  88.  
  89.         <!-- PM / EMAIL / WWW / MSGR -->
  90.  
  91.         <div align='left' class='darkrow3' style='float:left;width:auto'>
  92.         <a href='http://testmods.5.forumer.com/index.php?act=Msg&amp;CODE=04&amp;MID=1'><img src='style_images/1/p_pm.gif' border='0'  alt='PM' /></a>
  93.            <a href='http://testmods.5.forumer.com/index.php?act=Mail&amp;CODE=00&amp;MID=1'><img src='style_images/1/p_email.gif' border='0'  alt='Email Poster' /></a>
  94.            <a href='http://herproom.5.forumer.com' target='_blank'><img src='style_images/1/p_www.gif' border='0'  alt='Users Website' /></a>
  95.  
  96.  
  97.  
  98.  
  99.         </div>
  100.  
  101.         <!-- REPORT / UP -->
  102.  
  103.         <div align='right'>
  104.          <a href='javascript:scroll(0,0);'><img src='style_images/1/p_up.gif' alt='Top' border='0' /></a>
  105.         </div>
Last edited by Inny; Sep 25th, 2007 at 1:00 pm.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

Click to Expand / Collapse  Quote originally posted by Inny ...
can we do away with the requirement for an alt attribute altogether? so any image posted in img tags will work?
Its still not resizing, see here

http://testmods.5.forumer.com/index....st=0&#entry578

it seems the alt tag is added afterwards?

can we make it focus on images posted in [img] tags?
In your source, you have 2 <body> open tags. I'm not gonna look much further than that, sorry.

Look at the JS code for the image resizing, it's pretty easy to see the part that checks the 'alt' of the images. You could change that to check for a classname instead.. that's something that the user never sees, and your forum software may already be using a certain class for the <img> tags that it generates from BBcode

To be honest, you can ditch the JS dependancy entirely, and the dodgy delayed scaling entirely; if you rely on a bit of new-ish CSS, and the target="_blank" attribute.. ( Before any hippy tirades, I know 'target' is deprecated in XHTML 1.0 strict, but, Inny's site isn't XHTML 1.0 strict ). I'm not sure though, whether max-height/max-width is supported on older browsers, I've not had much luck with it in the past, but it works for me right now... If you don't mind assuming that the image is always going to be roughly square, you can just set img.thumbnail{ width: 300px; }, but, that's a big assumption. ( EDIT: whatever you do though, don't set width AND height to 300, it'll stretch the image without retaining aspect ratio.. If you leave one of them off, the renderer should pick the other one intelligently, but if you force it square, it'll go square whatever the dimensions of the image )

HTML Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. img.thumbnail
  6. {
  7.   max-width:300px;
  8.   max-height:300px;
  9. }
  10. a.thumbnail
  11. {
  12.   border-style:none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17.     <a href="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" target="_blank" class="thumbnail">
  18.       <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image" class="thumbnail"/>
  19.     </a>
  20.     <a href="http://www.link.cs.cmu.edu/splay/tree5.jpg" target="_blank" class="thumbnail">
  21.       <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image" class="thumbnail"/>
  22.     </a>
  23.     <a href="http://www.puzzlethis.co.uk/images/hom/cube.jpg" target="_blank" class="thumbnail">
  24.       <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image" class="thumbnail"/>
  25.     </a>
  26. </body>
  27. </html>
Last edited by MattEvans; Sep 25th, 2007 at 1:17 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

It seems the body open tag is hardwritten in where i cannot access it, this must be the problem. the style above will not be useful since we are talking images posted using image tags bb code, nobody will use html.
would altering body onload to a built in window.onload instead work?

This is all i can find relating to image class ?

<input type='button' accesskey='g' value=' IMG ' onclick='tag_image()' class='codebuttons' name='img' onmouseover="hstat('img')" />
Last edited by Inny; Sep 25th, 2007 at 1:29 pm.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

If by builtin you mean registered as an event handler using javascript to do the 'registering'.. yes, it will work. Consider fixing the code though, somewhere you're dropping another <body> tag in there, and that's a big error. I don't imagine that the second <body> tag gets processed atall, and that's the one with the event.

Even if you can't lose the JS dependance, you should still be able to address and affect (in CSS) the images generated from the BBcode, CSS doesn't care how the images are generated.. A CSS selector that should address every image within a post on your site:
CSS Syntax (Toggle Plain Text)
  1. div.postcolor img
  2. {
  3. /* CSS here */
  4. }

Looking at your site again though, the images don't seem to have a specific class.. You CAN collect them indirectly based on the assumption that they're always in DIVs with class 'postcolor'... But try and get it working on the specific ALT first, since your posted images all seem to have that ALT anyway..
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

Click to Expand / Collapse  Quote originally posted by Inny ...
would altering body onload to a built in window.onload instead work?
By the way, it should be document.body.onload... And in tests, it only works if you register that event handler after the starting body tag has been processed.. like:

HTML Syntax (Toggle Plain Text)
  1. .... Rest of site ^^^^
  2.     <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
  3.     <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
  4.  
  5.     <script type="text/javascript">
  6.     document.body.onload = "ResizeThem( );";
  7.     </script>
  8. </body>
  9. </html>

That's erring on the side of 'really bad practice'.. You can't just call the function from script in the head section though; none of the objects will exist..
Last edited by MattEvans; Sep 25th, 2007 at 1:52 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Sep 25th, 2007
0

Re: Auto Image Resize and create thumbs

That dosent to want to work either mate, must be my dodgy forum software
Thanks for your help!
cheers

Would it help you to see how the board is structured? I could pm you the access so you could mess with it if you like.
Last edited by Inny; Sep 25th, 2007 at 2:17 pm.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Change Header Image via Toggled Buttons Problem
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript display help with Live Search function





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC