Resize large [IMG] images and link them to original

[nsanden]

This mod should resize [IMG] images wider than 'max_width' and link them to their original size. Not very well tested, i'm hoping for some feedback/suggestions. I have tested in firefox/IE latest versions and it seems to work fine. Should be a pretty quick install.

INSTALL:

1) Edit /includes/class_bbcode.php around line 1879 for me.

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

Change to:
return '<img src="' . $link . '" border="0" alt="" class="img_tag" />';

2) Add the following to the headinclude template.


<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 700;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.className == "img_tag") {
if(img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';
img.outerHTML = strNewHTML;
}
}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>

</if>

[Comalies]

Demo/screenshot please.

[teedizz]

will this also resize sigs in the [IMG] tags? if so can you prevent that. thanks.

[COBRAws]

Demo/screenshot please.
here:
his mod should resize [IMG] images and link them to their original size.

[nsanden]

You can demo it on http://www.timesharetrap.com/forums/showthread.php?p=7&styleid=1#post7

[nsanden]

will this also resize sigs in the [IMG] tags? if so can you prevent that. thanks.

I believe it would. Why wouldn't you want that though?

[teedizz]

because some of my members use sigs like 650x650 & it still resizes those. I just want it for pictures in threads.

[teedizz]

the other img hack wouldnt do that. I like this one alot better so hopefully you can add that as an option ;)

[nsanden]

Updated, so the images are hidden until the browser actually resizes them. (This way you don't see the page loading with big images and then all of a sudden shrink to the right size.)

[nsanden]

Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.

[principino1984]

id doesn't work on my forum, as soon as I write down the headinclude text all the images in my forum won't show up anymore.

Marco

[NeutralizeR]

Hi,

I've almost tried all image resizing hacks and will install this one soon.

Note: You should also consider this adding for private messages, too: <if condition="THIS_SCRIPT == ''">

[epicbear]

I tried it because an upgrade killed my old fix and I can't remember which version I had installed...but it wrote the dimensions into the html so that they were resized as they were downloading. I liked that better than a blank page till all are downloaded.

I also added a link target to your code so they don't open in the same browser.

[nsanden]

id doesn't work on my forum, as soon as I write down the headinclude text all the images in my forum won't show up anymore.

Marco

What browser and OS are you using?

[principino1984]

What browser and OS are you using?


firefox and winxp sp2

Marco

[nsanden]

firefox and winxp sp2

Marco

Is it only on your forum or also when you view this thread? http://www.timesharetrap.com/forums/showthread.php?p=7&styleid=1#post7

There should be 2 images in that thread.

[transitbus]

doesnt work at all. Infact it removed the images instead of making a link

[nsanden]

hmm strange. guess i'll take out the part that hides the images until they resize then.

[principino1984]

any news? as soon as I try to install this hack when I send the post the image disappear instead of showin the link for the resized image.

Marco

[nsanden]

any news? as soon as I try to install this hack when I send the post the image disappear instead of showin the link for the resized image.

Marco

Look at my previous reply to you. https://vborg.vbsupport.ru/showpost.php?p=1084023&postcount=16

[NeutralizeR]

This is the fastest way to resize giant images (vBulletin 3.6) if you don't mind the "click to view the full version of the image" feature:
https://vborg.vbsupport.ru/showpost.php?p=1084205&postcount=144

[principino1984]

just in my forum, cause when I look @ that link you gave me it works fine

Marco

[Tralala]

doesnt work at all. Infact it removed the images instead of making a link


Same here, using Safari on a Mac.

[Masiello]

Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.

I agree

[nsanden]

just in my forum, cause when I look @ that link you gave me it works fine

Marco

Try reinstalling the hack then. It will probably work.

[PabloAM]

Resize in News in VBadvanced???

Thx

[nsanden]

Same here, using Safari on a Mac.

Yeah doesn't suprise me. Sorry :)

[principino1984]

Try reinstalling the hack then. It will probably work.


why should it work now? i already tried to reinstall the hack twice or three times... there's no way it will work now if you haven't change sometin in the code

Marco

[nsanden]

why should it work now? i already tried to reinstall the hack twice or three times... there's no way it will work now if you haven't change sometin in the code

Marco

I have changed it a couple times.

Just look for the: <style>#img_tag { display: none } </style> part and remove it from the headinclude template.

[teedizz]

Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.


well tha reason i ask is because I allow usres to have sigs 600x350 which doesnt break my design. on the other hand I have members who add pictures to threads which are like 1568x900 which does break my design. for instance, we have a thread named " post your desktop " & people are literally just taking screen shots & posting the whole thing. if this doesnt affect a sig thats 600x350 thats wrapped in [img] tags then i will install. thanks.

[principino1984]

I have changed it a couple times.

Just look for the: <style>#img_tag { display: none } </style> part and remove it from the headinclude template.


where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

[nsanden]

where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.

[nsanden]

well tha reason i ask is because I allow usres to have sigs 600x350 which doesnt break my design. on the other hand I have members who add pictures to threads which are like 1568x900 which does break my design. for instance, we have a thread named " post your desktop " & people are literally just taking screen shots & posting the whole thing. if this doesnt affect a sig thats 600x350 thats wrapped in [img] tags then i will install. thanks.

Change max_width = 700 to max_width = 600; and only images wider than 600 (thus not your signature images) will get resized down.

[principino1984]

Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.


thanks for helpin me, and sorry if I seemed upset or what, i didn't want to ;), but for real I can't fine the tad you tell me to remove... :confused:

Marco

[Ricsca]

Finally a product that works me with my forum integrated in the portal... ;)

Possible ? to make to see a notice when the image resize?

Thanks 1000

[Tralala]

Yeah doesn't suprise me. Sorry :)

So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

[PersianImmortal]

This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

[nsanden]

Finally a product that works me with my forum integrated in the portal... ;)

Possible ? to make to see a notice when the image resize?

Thanks 1000

Yep, look for:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';

in the hack, and simply add to the end of it like:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image Resized Down';

[nsanden]

So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

It works for Firefox and Internet Explorer on Windows. I haven't tried it for any other browsers or OS's. That individual was using Safari on Mac, so it didn't surprise me that it didn't work.

Also, it shouldn't make any images dissapear (anymore). It should either resize or NOT resize depending on whether the browser understands the javascript or not.

[nsanden]

This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Not possible currently. Could be done though.

Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

That's true, it doesn't have a target="_blank" (which would make the image open in a new window) in the demo. This is because the demo is using a slightly older version of the hack. The current hack code has the target="_blank" in it and indeed would open the image in a new window.

[Ricsca]

Yep, look for:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';

in the hack, and simply add to the end of it like:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image Resized Down';



Thanks

[PersianImmortal]

Not possible currently. Could be done though.

Actually it's fairly simple once I experimented with it (I shouldn't have been lazy in the first place :)).

All you need to do is add a new variable at the top under max_width called max_height, and then add an else if statement to the resizeImages function so that it also checks maximum height and resizes. Seems to work without any problems on IE7 and Firefox, haven't tested it extensively yet.


The completed modified code to get this hack working with all the bells and whistles is this:

Edit /includes/class_bbcode.php as normal, that is changing:
return '<img src="' . $link . '" border="0" alt="" />';
to:
return '<img src="' . $link . '" border="0" alt="" id="img_tag" />';
Then use the following code in headinclude instead:
<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 500;
max_height = 400;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.id == "img_tag") {
if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
}
}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>
</if>

(Note: code modified as per my post further below)

Here's some screenshots of how it looks and works on my forums:

Maximum width (set to 500 on my forums) enforced without affecting smaller images, note the neat notification under each image, so users won't be confused:
http://img213.imageshack.us/img213/4236/untitled1vn3.th.jpg (http://img213.imageshack.us/my.php?image=untitled1vn3.jpg)

When the image is clicked it opens the full-sized image in a new window. Hovering the mouse over the image shows the 'Click to enlarge' alt text.

Maximum height (set to 400 on my forums) enforced again without any problems, and again with the notification:
http://img208.imageshack.us/img208/4865/untitled2fy9.th.jpg (http://img208.imageshack.us/my.php?image=untitled2fy9.jpg)


Thanks for creating this code in the first place nsanden, and with some subtle modifications it seems to meet all my needs now, so I've clicked Install :)

[newbe_haselina]

Thanks for this hack ... *install* ... i like this one

I includes all the suggested changes, e.g. to resize also the hight of the images, but it doesn't seem to work correctly. I can't describe it, but what happens if the width AND the hight have to be resized? In my forum it seems that only one is resized .. .the hight OR the width? Some images are only resized in the width, not in the hight. Others are sized perfectly ...

Any idea?

Edit: To show what I tried to explain, please see this thread of my forum http://www.auftrab.de/Forum//showthread.php?t=336. In the first threadbox, the images are resized, in the second one they have the original size...

[PersianImmortal]

Actually after a moment's thought I realized that my max_height "fix" isn't really a true fix. All it does is check to see if a picture meets the maximum width first or the maximum height - one or the other, not both.

That is, if a picture is both wide and tall, it only resizes the width not the height because that's the first thing it checks. I'll test out some more code and post the full solution shortly.

/EDIT: OK, I believe I've solved this problem. I just included another else if statement and modified the first two statements to check more throughly. This should cover all situations and should keep the correct aspect ratio for resized images.


<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 500;
max_height = 400;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.id == "img_tag") {
if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
}
}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>
</if>

[newbe_haselina]

Thanks a lot for helping :) ... That's what I thought it would do ... but I'm very unexperienced in coding, so it was just a guess. Promise to wait patiently ;)

[newbe_haselina]

/EDIT: OK, I just included another else if statement and modified the first two statements. This should cover all situations. Note however that it can distort images which are both wide and tall - that is it will force an image which is both wider and taller than the maximums to be resized to be exactly the height and width of the maximums. This shouldn't be a huge problem, since people can click on the image to see the original in its proper shape. And usually most images are either too wide or too tall, not both.

<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 500;
max_height = 400;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.id == "img_tag") {
if(img.width > max_width && img.height < max_height) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && img.width < max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
} else if(img.height > max_height && img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
img.outerHTML = strNewHTML;
}

}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>
</if>

Thanks for your very fast help, I just included the code changes, but unfortunately it doesn't seem to have any impact on "my thread" ... the images which are to high haven't been resized ... I just changes the width from 500 to 400, all the rest is copied from your code ... :cross-eyed: ... I'm afraid I do something wrong ...

EDIT: It's funny ... in some other threads in my forum the images are resized in width AND hight, only in the thread I posted it doesn't seem to work ... ??

[PersianImmortal]

Try again, I just updated the code while you were testing it. Check my previous post. I missed some basic checks and I had to fix some things. Make sure to copy and paste the entire new code over your existing one in headinclude. It should work properly now.

[newbe_haselina]

Hmm, just overwrote it again ... but please have a look http://www.auftrab.de/Forum/showthread.php?t=336 ... in the first thread it's ok, in the second one nothing happend ...

but anyway ... thanks a lot for your help ... :)

[PersianImmortal]

Looks to be working fine for me - make sure to press CTRL+F5 on your browser to refresh all the code which is being displayed. Also which browser are you using? It works for me in Internet Explorer 7 and Firefox.

[newbe_haselina]

Thanks a lot, that may be the issue ... I'm in the office and there we have IE 6.0 ... :-) ... thanks for your help :-)

[PersianImmortal]

No, you're right, I just checked your page and it works in Firefox, but not in IE7 - the second set of pictures are not resized for some reason.

On my site however it seems to work, here is a thread from my site which has it working: http://forums.tweakguides.com/showthread.php?t=4535

Note that I edited my post on the bottom of the first page to include the same images again, and as you can see both the top set of images and bottom set of images should be working (at least they are for me in Firefox and IE7).

So maybe there's something in particular about your forums which is causing this? Any feedback from others will also be helpful.

[newbe_haselina]

You're right, I just tested it with the Mozilla/Firefox Browser, and it works perfectly :cross-eyed:

Hmmmm, hopefully most of my users use Mozilla ;) ... but anyway, even if it doen't work 100% with IE, it's an improvment for my community :)

[principino1984]

I found out why this hack is not working on my forum...

this is what I see with IE:

https://vborg.vbsupport.ru/ (http://imageshack.us)

and as I click on the image... see the url:

https://vborg.vbsupport.ru/ (http://imageshack.us)


Well, this is the problem, when this hack tries to resize the picture, it changes the url and thats why the image "disappear" on firefox..

can you help me?

thanks a lot

Marco

[PersianImmortal]

For the code I've posted on the previous page, I've tested it in Firefox 1.5.0.7 and Firefox 2 RC1, as well as Internet Explorer 7 and it doesn't seem to have any problems at all, working perfectly on my forum (see test link further above).

All I can suggest is that you follow the instructions to edit your class_bbcode.php file first, then try using the original code for the hack to see if it works, then try replacing it with my code instead and see if it works.

[principino1984]

where do I find those instruction... cause the hack is workin right i think, but it still write me the url like this:

http://yurlmyforum/http://imageurl

where do I have to chage to make it ok?

Marco

[nsanden]

Ah I see. Well the screen shots help, but I really need to view the page myself (so I can view the source).

I found out why this hack is not working on my forum...

this is what I see with IE:

http://img179.imageshack.us/img179/2814/resize1qm5.jpg (http://imageshack.us)

and as I click on the image... see the url:

http://img400.imageshack.us/img400/1329/resize2lp3.jpg (http://imageshack.us)


Well, this is the problem, when this hack tries to resize the picture, it changes the url and thats why the image "disappear" on firefox..

can you help me?

thanks a lot

Marco

[principino1984]

i think the problem is VBSEO that rewrite all the links... right now i've just installed another hack, but If it helps you for the support for the other guy I can post you my headinclude or just tell me what do you need

Marco

[nsanden]

If you can link me to the thread in your screen shot that should be all i need. Of course if you installed another image resize hack and uninstalled mine, I won't be able to figure out the problem :) Up to you, my guess is you are right, its just another hack conficting with it.

i think the problem is VBSEO that rewrite all the links... right now i've just installed another hack, but If it helps you for the support for the other guy I can post you my headinclude or just tell me what do you need

Marco

[GoNz00]

seems to be working fine here, the "other" image tag resizer lagged the forum to hell and back, may have been the .js file included. normal speed resumed with this one :)

[egelforum]

Anyone with vB 3.6.2 around? I can't get to work ANY of this image resize addons. Not even one. They just don't do anything. I think the cause is an incompatibility with 3.6.2.

[GoNz00]

works fine for me bud.

[egelforum]

I don't understand why it doesen't work then.

I have changed the line in class_bbcode.php, and put the script at the top of the headinclude template, but absolutely nothing happens... Any ideas?

[GoNz00]

i put the script at the bottom, wonder if that will make it work, dont think it matters tho' ?

[egelforum]

I already tried in the bottom, nothing happens. It's strange because it is a simple script...
I suspect that the problem lies within the class_bbcode.php
I will upload a clean version of the file and see if it works.

Edit: nopes :(

[GoNz00]

heres mine, give it a try ?

i removed my licence number :) copy yours over

[egelforum]

Appreciate that. It didn't worked neither =(
It really puzzles me...
We need this or a similar addon very badly because of the thin layout of our forums... A big image simply destroys the design in a thread...

Edit: Can you post here exactly the code you put in the headerinclude?
They were so many changes all along the thread that maybe i have a broken one (?)

[GoNz00]

<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 700;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.id == "img_tag") {
if(img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image resized, click for original';
img.outerHTML = strNewHTML;
}
}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>

</if>

after the
</if>
</if> that was already there..

this is the entire page with mod for you to compare

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />
<meta name="generator" content="vBulletin $vboptions[templateversion]" />
<if condition="$show['threadinfo']">
<meta name="keywords" content="$threadinfo[title], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[title] $foruminfo[title_clean]" />
<else />
<if condition="$show['foruminfo']">
<meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />
<else />
<meta name="keywords" content="$vboptions[keywords]" />
<meta name="description" content="$vboptions[description]" />
</if>
</if>

<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
<style type="text/css">
ul, ol { padding-left:20px; }
</style>
</if>
<!-- / CSS Stylesheet -->

<script type="text/javascript">
<!--
var SESSIONURL = "$session[sessionurl_js]";
var IMGDIR_MISC = "$stylevar[imgdir_misc]";
var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);
// -->
</script>

<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>
<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>
<if condition="$vboptions['externalrss']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />
<if condition="$show['foruminfo'] OR $show['threadinfo']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]" />
</if>
</if>
<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 700;

if(document.documentElement.outerHTML == null) {
HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
if(img.id == "img_tag") {
if(img.width > max_width) {
var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image resized, click for original';
img.outerHTML = strNewHTML;
}
}
}
}

if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}

</script>

</if>

all i can think is to revert headinclude and try again ?

[egelforum]

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

[GoNz00]

maybe its time to try the other version thats out there, the one with javascript you need to upload ?

i dropped it in place of this. but it worked fine.

[nsanden]

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

How are you testing to see if it works? What browser are you using? So far only confirmed to work in Firefox and IE 6+ on Windows.

You might also check the demo link, I believe 3rd or so post in this thread. If it doesn't work for you there, its your browser.

[BarelyHangingOn]

Works with 3.5.4

[PersianImmortal]

When testing your forum changes on your browser also make sure to press CTRL+F5 to force refresh the changes, just in case your browser is using cached versions of files.

[Viper007Bond]

FYI: Having multiple items with the same ID breaks XHTML validness. A CSS class should be used instead.

[nsanden]

FYI: Having multiple items with the same ID breaks XHTML validness. A CSS class should be used instead.

Yep, good point. Fixed!

[Codeman05]

I just installed it on my VB3.6.3 install and its not working either.

The images appear initially, and then disappear (once the script runs).

Any suggestions?

[nsanden]

I just installed it on my VB3.6.3 install and its not working either.

The images appear initially, and then disappear (once the script runs).

Any suggestions?

Browser? OS? Are you installing the original code in the first post or the version someone else posted later?

[Codeman05]

Browser? OS? Are you installing the original code in the first post or the version someone else posted later?

any browser, any o/s, original code.

I've switched to another script, so no worries. Thanks

[harlita]

Just installed on 3.6.5

Works like a charm <3

Thanks much!! EXACTLY what I was looking for. YOSH!

[srikanthbr]

this dosent work?