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..
MattEvans
Veteran Poster
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
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.
~s.o.s~
Failure as a human
11,938 posts since Jun 2006
Reputation Points: 3,281
Solved Threads: 734
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=0entry578
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 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 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 siteisn'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>
MattEvans
Veteran Poster
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
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 tag in there, and that's a big error. I don't imagine that the second 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..
MattEvans
Veteran Poster
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
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..
MattEvans
Veteran Poster
1,386 posts since Jul 2006
Reputation Points: 522
Solved Threads: 64
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.
~s.o.s~
Failure as a human
11,938 posts since Jun 2006
Reputation Points: 3,281
Solved Threads: 734
