get image WIDTH and HEIGHT and write attributes for any image

I'm using jScrollPane and I had some issues in Chrome and Safari with the height of the scrollable area.

To make jScrollPane work I have to开发者_如何学Go set HEIGHT and WIDTH for any image inside the scrollable area.

No problem with .css but what if one image is Ex: in portrait mode? To avoid setting width and height manually I realized... jQuery! :)

For now I have something like this:

imageWidth = $('.scroll_pane img').width();
imageHeight = $('.scroll_pane img').height();   
$('.scroll_pane img').css({'width': imageWidth, 'height': imageHeight});

That is half correct (I suppose) as now from:

<img src="some/url/image.jpg"/>

on DOM ready I get this:

<img src="some/url/image.jpg" style="width: 120px; height: 220px"/>

For the first image. The problem is that now all the other images have the same styles.

How to make EACH image write to it self his own styles?

EDIT:

Solution, thx to Cybernate (and Capsule for future suggestions.):

$(window).load(function () { 
    $('.scroll_pane').jScrollPane();

    $('.scroll_pane img').each(function(){    
        var $this = $(this);   
        var imageWidth = $this.width();   
        var imageHeight = $this.height();        
        $this.css({'width': imageWidth, 'height': imageHeight}); 
    }); 
});

Now calculates correctly the images styles and finally jScrollPane works in Safari and Opera!

Use the each function and then operate on individual element. e.g:

$('.scroll_pane img').each(function(){
    var $this = $(this);
    var imageWidth = $this.width(); 
    var imageHeight = $this.height();    
    $this.css({'width': imageWidth, 'height': imageHeight}); 
});

It won't solve your problem because width() and height() is calculated when the event is fired. If images are not loaded, you're screwed (width and height 0, or some pixels in IE).

You probably want to use this method: http://jscrollpane.kelvinluck.com/settings.html#autoReinitialise