Jquery - get the real dimension of the image or a way to be compliant if no js

Hello The context is a gallery and a page of thumbnails The goal of the script is to minimize the thumbnails and on hover to display them with their original size. The script do it well : -get the minimum size of thumbnails -define this minimal size for all thumbnails -on hover increase z-index and define the size as the original size of this thumbnail

but if the javascript is disabled it's a mess because each thumbnails has is own size

If I define the same size for all thumbnails by CSS or in html -in order to be compliant if there is no js-, the script will take this as the original size of the thumbnails, whereas it's not the real size of the picture.

the code is :

    <script type="text/javascript">

jQuery(window).load(function(){
var min_dim_width = 10000;
var min_dim_height = 10000;
$("ul.thumbnails img").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
            if ($.data(this,'size').height < min_dim_height)
      min_dim_height = $.data(this,'size').height;
    if ($.data(this,'size'开发者_运维知识库).width < min_dim_width)
      min_dim_width = $.data(this,'size').width;
});

$(".thumbnails img").each(function () {
    $(this)
      .css('width', min_dim_width+'px')
      .css('height', min_dim_height+'px')
    $(this).parents('li')
      .css('width', min_dim_width+5+'px')
      .css('height', min_dim_height+5+'px');
    }).hover(function() {
    if ($.data(this,'size').height == min_dim_height)
    {
      new_dim_height = min_dim_height*1.2;
    }
    else
    {
      new_dim_height = $.data(this,'size').height;
    }
    if ($.data(this,'size').width == min_dim_width)
    {
      new_dim_width = min_dim_width*1.2;
    }
    else
    {
      new_dim_width = $.data(this,'size').width;
    }

    $(this).parents('li').css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            marginTop: '-'+new_dim_height/2+'px',  
            marginLeft: '-'+new_dim_width/2+'px',
            top: '50%',
            left: '50%',
            width: new_dim_width, /* Set new width */
            height: new_dim_height, /* Set new height */
            padding: '10px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
    $(this).parents('li').css({'z-index' : '0'}); /* Set z-index back to 0 */
    $(this).removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            width: min_dim_width, /* Set width back to default */
            height: min_dim_height, /* Set height back to default */
            padding: '5px'
        }, 400);

});
});
</script>

thx for reading this and all my consideration if you succeed ! we can see it in action right there : http://www.planete-flop.fr/gallerie/index.php?/category/12

PS : reformulation of my "problem"

Well... I don't know if it's what you are looking for but... generally it's a good idea to set the image's dimensions in the html markup itself... as in:

<img src="cheese.jpg" alt="an image" title="whee!" height="100" width="200" />

You can override w/ JS if it is supported. Otherwise, at the least you get some predictability for your layout (even if the thumbs appear skewed).

Hope it helps!

Just find the correct size on the server

http://php.net/manual/en/function.getimagesize.php