Member Avatar for Inny

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.

<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()">
Edited by mike_2000_17 because: Fixed formatting
  • 4 Contributors
  • 15 Replies
  • 599 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by prabinrai
Member Avatar for MattEvans

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:

<html>
<head>
<script type="text/javascript">
function ResizeThem()
{
  var maxheight = 300;
  var maxwidth = 300;
  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()">

    <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"/>
    
</body>
</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..

Member Avatar for ~s.o.s~

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.

Member Avatar for Inny

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?

<!--Begin Msg Number 573-->
    <table width='100%' border='0' cellspacing='1' cellpadding='3'>
    <tr>
      <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>
        <td class='row4' valign='top' width="99%">


        
        <!-- POSTED DATE DIV -->
        
        <div align='left' class='row4' style='float:left;paddingtop:4px;padding-bottom:4px'>
        <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>
Yesterday at 07:06 am</a> ) Thanks For visiting Testmods! </span>
        </div>

        
        <!-- REPORT / DELETE / EDIT / QUOTE DIV -->
        
        <div align='right'>
        <!--TEMPLATE: skin_topic, Template Part: report_link-->
<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>
      </div>
      

    </tr>
    <tr>
      <td valign='top' class='post2'>
<a href="javascript:expandcollapse('573')">
   [+/-] show/hide user profile</a>

<span class="posthidden" id="573">




 <span class='postdetails'>
        <img src='http://testmods.5.forumer.com/html/avatars/abra1.gif' border='0' alt='' /><br /><br />
        Mrs Doubtfire<br /><br />
        <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 />
        Group: Admin<br />
        Posts: 229<br />
        Member No.: 1<br />
        Joined: April 08, 2006<br />
         <img src='http://www.filelodge.com/files/room20/525867/Flags/as.gif'>
<br />
         </span><br />


</span>
   


        <!--$ author[field_1]-->



        <img src='style_images/1/spacer.gif' alt='' width='160' height='1' /><br /> 

      </td>
      <td width='100%' valign='top' class='post2'>
        <!-- THE POST 573 -->

<div class="header" style="width:500px; height:2px; overflow:auto;"></div> 
<div class="container" style="width:500px; overflow:auto; height:200px;/*this becomes the editable height*/"> 
<table border="0">
 
<tr>
<td>

 <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>
        <filter:dropshadow><!--TEMPLATE: skin_global, Template Part: signature_separator-->
<br /><br />--------------------<br />
<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>

</td>
</tr>
</table></div> 
<div class="footer" style="width:500px; height:2px; overflow:auto;"></div> 


        <!-- THE POST -->
</td>
    </tr>
    <tr>
      <td class='darkrow3' align='left'><b><!--TEMPLATE: skin_topic, Template Part: ip_show-->
<span class='desc'>IP: [ ---------- ]</span></b></td>
      <td class='darkrow3' nowrap="nowrap" align='left'>
      
        <!-- PM / EMAIL / WWW / MSGR -->
      
        <div align='left' class='darkrow3' style='float:left;width:auto'>
        <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>
           <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>
           <a href='http://herproom.5.forumer.com' target='_blank'><img src='style_images/1/p_www.gif' border='0'  alt='Users Website' /></a>
           
        
           
           
        </div>
        
        <!-- REPORT / UP -->
         
        <div align='right'>
         <a href='javascript:scroll(0,0);'><img src='style_images/1/p_up.gif' alt='Top' border='0' /></a>
        </div>
Member Avatar for MattEvans

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.php?showtopic=158&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 )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img.thumbnail
{
  max-width:300px;
  max-height:300px;
}
a.thumbnail
{
  border-style:none;
}
</style>
</head>
<body>
    <a href="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" target="_blank" class="thumbnail">
      <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.link.cs.cmu.edu/splay/tree5.jpg" target="_blank" class="thumbnail">
      <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.puzzlethis.co.uk/images/hom/cube.jpg" target="_blank" class="thumbnail">
      <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image" class="thumbnail"/>
    </a>
</body>
</html>
Member Avatar for Inny

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')" />

Member Avatar for MattEvans

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:

div.postcolor img
{
/* CSS here */
}

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..

Member Avatar for MattEvans

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:

.... Rest of site ^^^^
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    
    <script type="text/javascript">
    document.body.onload = "ResizeThem( );";
    </script>
</body>
</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..

Member Avatar for Inny

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.

Member Avatar for Inny

Oh hey I got it now! I just didnt use the superfluos Body onload! Thanks!

<script type='text/javascript'>
<!--
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;}}}}
ResizeThem()
//-->
</script>
Member Avatar for Inny

one more thingy..

I want to put a new line

imgs[p].setAttribute('title','Resized - Click to see full size');

in the code above after

imgs[p].style.cursor="pointer";

It worked at first but now its not anymore. Can you think of a better way?

What the line does is set a new 'alt' so when you roll over a pic, it says

"resized image-click to enlarge' etc

Member Avatar for ~s.o.s~

The 'setAttribute' function doesn't scale well with all the browsers. You need to use the direct property manipualation technique for your code to be cross browser compatible. img[p].title = 'Click to enlarge image'; If it still doesn't work, there is a possibility of an error occuring before the given line.

Member Avatar for Inny

THankyou that works! :)

Member Avatar for prabinrai 
<script language="javascript">
function autoSize(i) //to within table cell;
{
(i.width/i.parentNode.width) > (i.height/i.parentNode.height) ?
i.style.width = 157.5 :
i.style.height = "100%"
};
</script>

<body>
<img src="your image.jpg" onload="autosize(this)">
</body>

simple
:icon_smile:

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Member Avatar for prabinrai 
<script language="javascript">
function autoSize(i) //to within table cell;
{
(i.width/i.parentNode.width) > (i.height/i.parentNode.height) ?
i.style.width = 100% :
i.style.height = "100%"
};
</script>
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.