BB Code Enhancements - BBCode: Resize Image with Text Wrap

Resize Image with Text Wrap BBCode

I created this BB Code for my own forum and thought I'd share it with the community.
This BB Code allows images to be posted at 200px Wide with text wrapping. Double-clicking the image enlarges it to 600px Wide. Single-clicking reduces the image size back to 200px Wide. The size/resize dimensions can easily be altered to suit your individual requirements. Just change the width= dimensions in the code below.

Demo Here

Instructions:
Open the BBCode Manager/Add New BBCode

Title: Resize Image

BB Code Tag Name: RI

Replacement:

<img src="{param}" width="200"  ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Example: [RI]image web address goes here[/RI]

Description: Post image at 200px Wide with text wrap. Double-click to enlarge to 600px Wide. Single-click to reduce back to 200px Wide.

Use {option}: No
Button Image (Optional): images/editor/ri.png (upload the attached image via FTP to /images/editor folder) Kindly supplied by VonDoom Post#6
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: Yes
Disable Automatic Link Parsing Within This BB Code: Yes


Please mark as installed if you use this

__________________________________________________ ______________

V. 1.01

• Removed height attributes to maintain image proportions (Thanks to djbaxter )

[ricardoNJ]

alt=" blablabla"

[midnz]

Originally Posted by ricardoNJ

Great but...is possible add a text in, like: "click to rezise this picture"???

Originally Posted by ricardoNJ

alt=" blablabla"

You're probably best to use: title="blablabla"

title provides the image hover message whereas alt is meant to display a message if the image doesn't display.
alt might work like title is some, but not all browsers.

[ricardoNJ]

Originally Posted by midnz

You're probably best to use: title="blablabla"

title provides the image hover message whereas alt is meant to display a message if the image doesn't display.
alt might work like title is some, but not all browsers.

Ok, then could you please add a modification about my question, up there?

[midnz]

Originally Posted by ricardoNJ

Ok, then could you please add a modification about my question, up there?

Sure, try this:

<img src="{param}" title="double mouse click to enlarge image/ single mouse click to reduce back to original size" width="200"  ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Change the title text to suit what you want.

[ar15dcm]

What if you have a mix of large and small images, is there a way if the image is smaller to not change its size?

[midnz]

Originally Posted by ar15dcm

What if you have a mix of large and small images, is there a way if the image is smaller to not change its size?

Create a new BB Code but change all 3 instances of width=XXX to the same value.

Example:

<img src="{param}" width="100"  ondblclick='this.src="{param}";this.width=100' onclick='this.src="{param}";this.width=100' align="left" hspace="10">

OR

You can download Borgs' [BB Code] Pack For vB 4.0.2+ and use the "Float Left" BB Code from that package

[ar15dcm]

I guess what I was asking is more javascript related. If I did that, then by big images would be small.

But, another question... Is there any way to add a style like a radius corner on the images using this in the code;

style="border-radius:8px;"

When tried it, it worked on the corners but I lost the padding on the preview article.

Thanks,

[midnz]

Originally Posted by ar15dcm

I guess what I was asking is more javascript related. If I did that, then by big images would be small.

But, another question... Is there any way to add a style like a radius corner on the images using this in the code;

style="border-radius:8px;"

When tried it, it worked on the corners but I lost the padding on the preview article.

Thanks,

Rather than just ignore you I thought I'd reply and let you know that I don't currently have any spare time to investigate a way to accomplish what you want to do ... I'm sorry.