Question

Hey Guys.
So this is more about me not knowing JS than being a real hard question.

I’m trying to write a little function in JS that I can call from jQuery to resize an image. The thing is I have no idea how to return the values back to jQuery after the JS function runs. Here is what i have so far:

$('a').click(function() {
    var slideshowHeight = $(this).closest('.stage').css('height')
    var slideshowWidth = $(this).closest('.stage').css('width')
    var newImageHeight = $(this).attr('data-height')
    var newImageWidth = $(this).attr('data-width')

    fit_within_box(slideshowWidth, slideshowHeight, newImageWidth, newImageHeight);

    $(this).children('img').css('width',new_width);
    $(this).children('img').css('width',new_height);
}

function fit_within_box(box_width, box_height, width, height)
{
    var new_width = width
    var new_height = height
    var aspect_ratio = parseInt(width) / parseInt(height)

    if (new_width > box_width)
    {
        new_width = box_width
        new_height = int(new_width / aspect_ratio)
    }

    if (new_height > box_height)
    {
        new_height = box_height
        new_width = int(new_height * aspect_ratio)
    }
    return (new_width, new_height)
}

As you can see, I’m trying to feed in some values and get back new_width and new_height.

Thanks for the help!

Answer 1

you can try to return a JSON object like this:

return {
    new_height:height,
    new_width:width
};

and use it in your jquery function:

var fit_img = fit_within_box(...);
...
$(this).children('img').css('height',fit_img.new_height);