Resize Images with BB Code Tags

[nerbert]

This new BBcode allows images to be resized to any allowed size. The tags work like this:

2621

or

http://www.mypics.com/gallery/picture.jpg

This will set the image width to 100px. The tags create a span with the specified width around the image and a CSS script sets the image width to inherit from the span

Title: Resize Images

BB Code Tag Name: resize

Replacement:


<style type="text/css">.resize img{width:inherit;}</style>
<span style="width:{option}px;" class="resize">
{param}
</span>



Example: 2621

Description: Allows image resizing.

Use{option}: Yes

Button Image: http://www.myforum.com/forum/images/editor/resize.png (Create a link to your actual forum)

Remove Tag If Empty: Yes

Disable BB Code Within This BB Code: No

Disable Smilies Within This BB Code: No

Disable Word Wrapping Within This BB Code: No

Disable Automatic Link Parsing Within This BB Code: No

Download the button then upload to forum/images/editor. Create the proper link for the button image. Fill in the rest of the BB Code settings and you are done. This should work on all vB4 and vB3 versions.

[nerbert]

I completely changed how this works. In the original version JavaScript detected an onload event and that would fire a function that would use DOM to set the image width to match the specified span width.


<span style="width:{option}px" name="resize">
{param}
</span>
<script type="text/javascript">
<!--
function resize(event) {
var image = is_ie ? event.srcElement : event.target ;
if(image.tagName=='IMG'){
if(image.parentNode.getAttribute('name')=='resize' ){
if(image.style.width!=image.parentNode.style.width ){
image.style.width = image.parentNode.style.width
}}}
}
if (document.addEventListener) {
document.addEventListener("load", resize, true);
}
else if (document.attachEvent) {
document.attachEvent("onload", resize);
}
//-->
</script>


Now the image width is simply inherited from the span. Much simpler!

If you have already created this BB code replace the HTML with the present code., everything else is the same

[clarknovak]

Still works with VB5, but only the original code: the updated code does not perform the resize and displays a full-size image.