www.webdeveloper.com
Results 1 to 2 of 2

Thread: Resize Image Code - Some "Bugs"

  1. #1
    Join Date
    Feb 2010
    Posts
    2

    Resize Image Code - Some "Bugs"

    Hello Everyone!


    I hope someone can help me with fixing this javascript code

    So I got this Resize Image BBCode here. It is used for a Forum called Zetaboards, where I can just put it in my Admin Control Panel to make it work for my whole forum.

    What does the code do?
    With this BBCode, members are able to insert images to their posts and also are able to resize the images.

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

    Here is a test thread I made with testing the rimg code, so you can see how the code works:
    http://s1.zetaboards.com/Piano2/topic/2874654/1/


    What are the problems with the Code?
    - the Images are not resized correctly everytime
    - sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong.
    - works best on firefox.
    - the first option "[rimg][rimg]" doesn't work on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled


    And finally this is the Javascript Code:
    Code:
    // Rimg by RedBldSandman of ZBCode.com
    $(function() {
    if (location.href.match("topic")||location.href.match("single")) {
    $(".c_post").each(function() {
    parse_rimg(this);
    });
    } else if (location.href.match("search")) {
    $(".search_results").each(function() {
    parse_rimg($(this).children("div:eq(0)"));
    });
    } 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=="") {
    ZetaInsert("[rimg]"+u_p+"[/rimg]");
    return;
    } else if (u_w.match("%")) {
    ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]");
    return;
    } else if (u_w=="h") {
    var u_h = prompt("Enter Resize Height");
    if (u_h==null) return;
    ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]");
    return;
    } else if (u_w=="w") {
    var u_h = prompt("Enter Resize Width");
    if (u_h==null) return;
    ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]");
    return;
    } else if (parseInt(u_w)) {
    var u_h = prompt("Enter Chosen Height");
    if (u_h==null) return;
    ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]");
    }
    });
    $("#topic_review tbody tr").each(function() {
    parse_rimg($(this).children("td:eq(1)"));
    });
    }
    });
    
    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_single(this);
    });
    
    $(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() {
    Rimg_percent(this);
    });
    
    $(z).find("div.spoiler_toggle").click(function() {
    $(this).next().toggle();
    $(this).next().find(".Rimg_single").each(function() {
    Rimg_single(this);
    });
    $(this).next().find(".Rimg_percent").each(function() {
    Rimg_percent(this);
    });
    });
    }
    
    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")) {
    $(x).height(newD).width((newD/oldH)*oldW);
    } else if ($(x).hasClass("Rimg_w")) {
    $(x).width(newD).height((newD/oldW)*oldH);
    }
    $(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) { $("#c_post-preview").html(s); if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview")); parse_rimg($("#c_post-preview")); }); } return false; }

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

    Thanks for your answers and help!

  2. #2
    Join Date
    Feb 2010
    Posts
    2
    sorry, i have just seen that the code i pasted above is not properly shown between the "(code)" Tags, so i paste the code between the (HTML) BBCode instead now:

    HTML Code:
    // Rimg by RedBldSandman of ZBCode.com
    $(function() {
    if (location.href.match("topic")||location.href.match("single")) {
    $(".c_post").each(function() {
    parse_rimg(this);
    });
    } else if (location.href.match("search")) {
    $(".search_results").each(function() {
    parse_rimg($(this).children("div:eq(0)"));
    });
    } 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=="") {
    ZetaInsert("[rimg]"+u_p+"[/rimg]");
    return;
    } else if (u_w.match("%")) {
    ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]");
    return;
    } else if (u_w=="h") {
    var u_h = prompt("Enter Resize Height");
    if (u_h==null) return;
    ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]");
    return;
    } else if (u_w=="w") {
    var u_h = prompt("Enter Resize Width");
    if (u_h==null) return;
    ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]");
    return;
    } else if (parseInt(u_w)) {
    var u_h = prompt("Enter Chosen Height");
    if (u_h==null) return;
    ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]");
    }
    });
    $("#topic_review tbody tr").each(function() {
    parse_rimg($(this).children("td:eq(1)"));
    });
    }
    });
    
    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_single(this);
    });
    
    $(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() {
    Rimg_percent(this);
    });
    
    $(z).find("div.spoiler_toggle").click(function() {
    $(this).next().toggle();
    $(this).next().find(".Rimg_single").each(function() {
    Rimg_single(this);
    });
    $(this).next().find(".Rimg_percent").each(function() {
    Rimg_percent(this);
    });
    });
    }
    
    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")) {
    $(x).height(newD).width((newD/oldH)*oldW);
    } else if ($(x).hasClass("Rimg_w")) {
    $(x).width(newD).height((newD/oldW)*oldH);
    }
    $(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 = "[quote]" + $("#txt_quote").val() + "[/quote]";
    } else {
    prevQuote = "";
    }
    $.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) {
    $("#c_post-preview").html(s);
    if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview"));
    parse_rimg($("#c_post-preview"));
    });
    }
    return false;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles