Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resize Image BBCode - Need Help to Fix it

    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. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do.
    2. [rimg=Width,Height]IMG_SRC[/rimg] // with this option, you can change the width and height of the image.
    3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image
    4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted
    5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead.
    6. [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 to test 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
    - 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][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:

    PHP 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() {
    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.preventDefaulte.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*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) {
    if (
    y.match("%")) {
    y.replace(/[^d.]/gi,"");
    return 
    "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />";
    } else if (
    y.match(/D/i)) {
    y.replace(/[^hw]/gi,"").toLowerCase().split("")[0];
    = (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;
    }
    </script> 

    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!
    Last edited by BoneyM; 02-03-2010 at 08:40 PM.


 

Posting Permissions

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