JQuery: Dynamic Image Resize

Question

I'm trying to do a responsive theme for wordpress. For preparation, I'm creating my resize script using JQuery to dynamically adjust it when needed.

<html>
<head>
<script type="text/javascript" src="jquery.js" ></script>
<?
class generate_image {

    var $image;

    function __construct($getimage) {
        $this->image = $getimage;
    }

    function display () {
        $wrapper = '<img id="sample" src="' . $this->image . '">';
        return $wrapper;
    }


}
$view = new generate_image("sample.jpg");
?>

<script language="javascript" type="text/javascript">
    var resize = {
    bindimage: function (containerid) {
            var width = $(containerid).width();
            var height = $(containerid).height();

            var maxwidth = 1291;
            $(window).resize(function(){

                var percent = $(window).width() / maxwidth;
                var now_height = height * percent;
                var now_width = width * percent;

                $('img').attr('height', now_height);
                $('img').attr('width', now_width);

                $('.win_height').text("Windows Height: " + $(window).height() );
                $('.win_width').text("Windows Width: " + $(window).width() );

                $('.img_height').text("Image Height: " + $('img').height() );
                $('.img_width').text("Image Width: " + $('img').width() );

                $('.win_calcu').text("Image Width: " + now_height );
            });//end of resize
        }//end of bind function

    }//end of object

    $(document).ready(function(){
        resize.bindimage('img');
    });
    </script>*
    </head>
    <body>
    <div>

    <div class="image">
     <? echo $view->display(); ?>
    </div>
    <div class="information">
    <table>
    <tr>
    <td>
    <p class="img_height">Image Height</p>
    </td>
    <td>
    <p class="img_width">Image Width </p>
    </td>
    </tr>
    <tr>
    <td>
    <p class="win_height">Window Height</p>
    </td>
    <td>
    <p class="win_width">Window Width</p>
    </td>
    </tr>
    <tr>
    <td>
    <p class="win_calcu"></p>
    </td>
    </tr>
    </table>
    </div>

    </div>
    </body>
    </html>

Any Thoughts? This works in IE9 but not in Chrome, it set the height and width to 0 once I resize it.

alex · Accepted Answer · 2012-01-06 08:22:29Z

1

Try setting an integer on now_height,now_width variables

var now_height = parseInt(height * percent);
var now_width = parseInt(width * percent);

also try calling your function on $(window).load() event

$(window).load(function(){
    resize.bindimage('img');
});

also checkout the scope of variable width,height you are using it inside the resize function but it isn't readable there...change your code to something like this

<script language="javascript" type="text/javascript">
var width = 0;
var height = 0;
var resize = {
bindimage: function (containerid) {
        width = $(containerid).width();
        height = $(containerid).height();

edited Jan 6, 2012 at 8:22

answered Jan 4, 2012 at 8:47

alex

5801 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr A Over a year ago

It works. But It doesn't scale-back when it to screen resolution.

Mr A Over a year ago

You are saying, the if function B is nested in function A. Variables in Function A will not be readable in function B?

Collectives™ on Stack Overflow

JQuery: Dynamic Image Resize

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related