ZetaBoards image resizer

GPL3

This script is based on (the concept of) this, and makes large images resize when clicked. That is, they don't stretch the skin, they resize in-place, and they don't stretch the skin even when at full size. Images inside a link still work: the link is turned into a text link and placed before the image, and clicking the image still resizes it.

On IE, the script just makes sure large images don't stretch the post table; this is because CSS overflow isn't handled properly for a container that doesn't have a fixed width (that is, we're relying on max-width). Clicking them does nothing.

Download here, or look below (version 1.2.1).

Installation

First place the following CSS (or equivalent) in all skins:

.c_post, .c_sig, #topic_review .c_desc + td {max-width: 0;}

Optionally, add this to all skins to make large images start small (otherwise they start large):

.c_post img, .c_sig img, #topic_forums td img {max-width: 100%;}

Then just place the code below in any of the Board Template sections in the ACP (if placed lower down, the important stuff will load quicker).

<script type="text/javascript">
//<![CDATA[
function td_child (elem) {
    var c = $(elem);
    var p = c.parent();
    var n = 0;
    while (!p.is('td')) {
        c = p;
        p = c.parent();
        if (p == window || n == 20) return undefined;
        n++;
    }
    return c;
}

function elem_width (elem) {
    if ($(elem).is(':hidden')) {
        var c = $(elem);
        var p = c.parent();
        // keep going up until we find something that's not hidden
        while (p.is(':hidden')) {
            c = p;
            p = c.parent();
        }
        var w = 0;
        $.swap(c[0], {position: "absolute", visibility: "hidden", display: "block"}, function () {w = $(this).width();});
        return w;
    } else return $(elem).width()
}

function check_image (img) {
    if (this != window) img = this;
    // check if large enough to do this for
    var c = td_child(img);
    if (c == undefined) return;
    var p = c.parent();
    if (c.width() >= p.width()) {
        // check if in a link
        var in_link = false;
        p = $(img).parent()
        while (!p.is('td')) {
            if (p.is('a')) {
                in_link = true;
                break;
            }
            p = p.parent();
            if (p == window) break;
        }
        if (in_link) {
            // create extra element to link to same thing.
            p.before("<small>(<a href='" + p.attr('href') + "' class='moved_link'>links to</a>)</small><br>");
            p.children().insertBefore(p);
            p.remove();
        }
        // resize on click
        $(img).click(function () {
            if (elem_width(this) == $(this).parent().width())
                $(this).css('max-width', 'none');
            else
                $(this).css('max-width', '');
        });
    }
}

if ($.browser.msie)
    window.onload = function () {
        var tds = $(".c_post img, .c_sig img, #topic_review td img");
        var p = td_child(tds[0]);
        if (p == undefined) return;
        p = p.parent();
        tds.css('width', '0');
        var w = elem_width(p);
        tds.css('width', '');
        tds.each(function () {
            if (elem_width(this) > w) $(this).css('width', '100%');
        });
    };
else {
    $(".c_post img, .c_sig img, #topic_review td img").each(function () {
        if (this.complete) check_image(this);
        else $(this).load(check_image);
    });
}
//]]>
</script>