View Full Version : Resize Image BBCode - Need Help to Fix it

02-03-2010, 07:33 PM
Hello Everyone!

I hope someone can help me with fixing this javascript code :)

About the Code
So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum.

What does the code do?
The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images.

There are different resize image options:
1. IMG_SRC // just inserts an image, like the normal "(img)(/img)" TAGS do.
2. IMG_SRC // with this option, you can change the width and height of the image.
3. IMG_SRC // Resize the image by typing the percentage size of the original image
4. IMG_SRC //Just type the wanted height for the image, and the Width will be automatically adjusted
5. IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead.
6. [rimg=x]IMG_SRC //x will be both the height and width (so it'll be a square...)

Here is a test thread I made to test the "rimg code", so you can see how the code works:

What are the problems with the Code?
- the Images are not resized correctly
- sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong.
- or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again
- In the Search View (when using the search) the images are too big and almost take the whole screen...
- the first option "[rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled

And finally this is the Javascript Code:

<script type="text/javascript">
// Rimg by RedBldSandman of ZBCode.com
$(function() {
if (location.href.match("topic")||location.href.match("single")) {
$(".c_post").each(function() {
} else if (location.href.match("search")) {
$(".search_results").each(function() {
} else if (location.href.match("post")) {
var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />";
$("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>");
$("button[name=rimg]").mouseover(function() {
$("input[name=helpbox]").val("Insert Image (with resize options)");
}).click(function(e) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
var u_p = prompt("Enter the Image Location","http://");
if (u_p==null) return;
var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image");
if (u_w==null) return;
u_w = u_w.replace(/\s/gi,"").toLowerCase();
if (u_w=="") {
} else if (u_w.match("%")) {
} else if (u_w=="h") {
var u_h = prompt("Enter Resize Height");
if (u_h==null) return;
} else if (u_w=="w") {
var u_h = prompt("Enter Resize Width");
if (u_h==null) return;
} else if (parseInt(u_w)) {
var u_h = prompt("Enter Chosen Height");
if (u_h==null) return;
$("#topic_review tbody tr").each(function() {

function parse_rimg(z) {
$(z).html($(z).html().replace(/\[rimg(?:=\s*([\d\w%]+?)\s*(?:,\s*(\d+?)\s*)?)?\](.+?)\[\/rimg\]/gi,function(x,y,a,b) {
if (y.match("%")) {
y = y.replace(/[^\d\.]/gi,"");
return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />";
} else if (y.match(/\D/i)) {
y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0];
y = (y!="h"&&y!="w")?null:y;
if (y) {
return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />";
} else {
return x;
} else if (!a) {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />";
} else {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />";

$(".Rimg_single").not("div.spoiler .Rimg_single").each(function() {

$(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() {

$(z).find("div.spoiler_toggle").click(function() {
$(this).next().find(".Rimg_single").each(function() {
$(this).next().find(".Rimg_percent").each(function() {

function Rimg_single(x) {
var oldH = $(x).height();
var oldW = $(x).width();
var newD = $(x).attr("alt").replace(/[^\d\.]/gi,"");
if ($(x).hasClass("Rimg_h")) {
} else if ($(x).hasClass("Rimg_w")) {
$(x).attr("alt","Posted Image").removeAttr("class");

function Rimg_percent(x) {
var NewD = $(x).attr("alt").replace(/[^\d\.]/gi,"")/100;
$(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class");

function Preview() {
var prevQuote;
if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) {
if (!$("#c_post-preview").length) {
$("#c_post").prepend("<div id='c_post-preview'></div>");
if ($("#txt_quote").length && $("#txt_quote").val()) {
prevQuote = "
" + $("#txt_quote").val() + "";
} else {
prevQuote = "";
$.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) {
if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview"));
return false;

Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE?

Thanks for your answers and help! :thumbsup: