Auto resize large image

In fact this is a work around for the auto resize feature to work with the WYSIWYG editor.

Step1. In includes/class_bbcode.php

Find (in line around 18xx):

return '<img src="' .  $link . '" border="0" alt="" />';

Replace with:

return '<img src="' . $link . '" onload="if(largerThan(this.width,700)) {this.width=700;this.alt=\'Click here to see a large version\';}" onmouseover="if(this.alt) this.style.cursor=\'pointer\';" onclick="if(this.alt) window.open(\'' . $link . '\');" border="0" />';

Step2. Modify the common template of your template set

Add this to the headinclude section:

<script type="text/javascript">
function largerThan(a,b)
{
return a>b;
}
</script>

Demo:
http://talkmusic.org/showthread.php?t=3165

[S@NL - BlackBik]

Hi Marris,
I tried your code, but it doesn't work for me:
- In IE the image is resized and opens in a pop-up, but the alt tag doesn't show when hoovering over the image with my mouse, although I see it in the source of the page (this.alt='text')
- In FF the images are not affected at all. They don't resize (FF 1.5). In the source of the page I see the script, but it's doing nothing I'm afraid.

[S@NL - BlackBik]

Sorry mate, forget it.
I forgot to edit the headinclude template.....

My bad, hack works like a charm

[evenmonkeys]

Originally Posted by Marris

Well, I've got a semi-working popup in IE with ggiersdorf's code. This is the most consistent for me, but still not perfect:

 $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : ''; 
if (stristr($navigator_user_agent, "msie")) { 
    return '<img src="' .  $link . '" border="0" onload="if(this.width >= 400) {this.alt=\'Click here to see the orignal image\';}" style="width: expression(this.width > 400 ? 400 : true);" onmouseover="if(this.width >= 400) {this.style.cursor=\'pointer\';}" onclick="if(this.width >= 400) window.open(\'' . $link . '\',\'Image\',\'toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes\');"/>'; 
} else { 
    return '<img src="' . $link . '" onload="if(largerThan(this.width,400)) {this.width=400;this.alt=\'Click here to see the orignal image\';}" onmouseover="if(this.alt) this.style.cursor=\'pointer\';" onclick="if(this.alt) window.open(\'' . $link . '\');" border="0" />';
}

Replace all occurances of 400 with your desired width value.

In the IE code, instead of if(this.width >= 400), you are welcome to try combinations of these other if statements:

if(largerThan(this.width,400))
if(this.width > 400)
if(this.alt)

But neither of those worked consistently for me. I tried many different combinations and the code block above is what works best for me across IE, Firefox and Opera.

I welcome improvements.

I am having an issue with this. When I go to edit my signature a second time, it displayed the html for that in the signature. It just shows the huge code instead of the image I put it. It doesn't do it the first time around, but it does it if I edit it.

[Gizmo999]

Ok, lets see if I get this right,

I replace the code in includes/class_bbcode with ggiersdorf/Marris's code and then alter the template, no other mods needed??

[chrisisonfire]

This mod worked fine for me, except when you view the same page after you've been automatically forwarded after posting, and then only some images wouldn't resize. However, for a while now I've personally had a problem with posting URL links, in that I'd post a normal link, but the link would open in the form of; http://"http://www..." and of course wouldn't work. So, it appears that my trouble was in the bbcode file we need to edit. I don't suppose anyone else got this problem, did they? o_O

I'd actually like to reinstall this script, as it's one of the best I've seen, but I'd rather be able to post working links, hehe.

[Allan]

don't work for me with vB3.5.3

[emtee]

This works perfect with 3.5.3! Thanks Marris! How about images that are attachments? It'd be great if they can be automatically resized too.

Edit: For attached images, I found a simple, built-in solution. Just rebuild your thumnails with your desired size, and 1 image per row (in vbulletin options message attachment).

[Allan]

It's possible to create un new thraed but it's the brothel

[Tralala]

Marris' version working nicely for me. Thanks, gang!

[ffevo]

Originally Posted by kONGO

I have modified the original HTML a bit, since I didn't like it. I use the title attribute instead of the alt attribute, since HTML standards state that the alt attribute is to be used by screen reading software, whereas the title attribute is usually used to display a 'tooltip' when the mouse is positioned above the element in question.

Also, the hand pointer one sees when the mouse is moved over a link is actually a cursor called pointer, not hand, in the standards.

So, I use this code:

return '<img onload="if (this.width > 700) {this.width=700; this.title=\'Click to view normal size\';}" onmouseover="if (this.title) {this.style.cursor=\'pointer\';}" onclick="if (this.title) {window.open(\'' . $link . '\');}" src="' . $link . '" border="0" alt="" />';

I modified the handle_bbcode_img_match function in the file includes/class_bbcode.php.

Works in all browsers I've tested it in. If it works in Firefox but not IE, I would say the best bet is to check the IE settings. JavaScript may be fully or partially disabled.

Does not work in IE at all and when i click on the image to enlarge it, it doesnt do anything.