jqueryを使用してさまざまな次元のランダムイメージを表示する

Question

配列のランダムイメージをロードし、CSSの負のマージンを使用して中央に配置する単純なページがあります。これは現在すべての画像が同じサイズであるため動作しますが、さまざまなサイズの画像に対応できるようにコードを調整したいと思います。

イメージの高さと幅を配列段階で計算し、それをCSS/HTMLに渡して中央に配置できますか？ここでは私が現在取り組んでいるコードです - どんな助けも大歓迎です。

HTML/CSS：

#content { 
margin-top: -206px; 
margin-left: -290px; 
position: absolute; 
top: 50%; 
left: 50%; 
width: auto; 
height: auto; 
} 

<div id="content"> 
<img class="shuffle" src="" width="580" height="413" border="0" alt="" /> 
</div> 

はJQuery：

$(document).ready(function() { $('.shuffle').randomImage({path: 'images/'}); }); 

(function($){ $.randomImage = { defaults: { path: 'images/', myImages: [ 'image01.jpg', 'image02.jpg','image03.jpg', 'image04.jpg', 'image05.jpg' ] } } 

    $.fn.extend({ randomImage:function(config) { 
      var config = $.extend({}, $.randomImage.defaults, config); 
      return this.each(function() { 
       var imageNames = config.myImages; 
       var imageNamesSize = imageNames.length; 
       var randomNumber = Math.floor(Math.random()*imageNamesSize); 
       var selectedImage = imageNames[randomNumber]; 
       var fullPath = config.path + selectedImage; 
       $(this).attr({ src: fullPath, alt: selectedImage }); 
      }); 
     } 
    }); 
})(jQuery); 

Answer 1

この方法：

... 
var fullPath = config.path + selectedImage; 
var img = new Image(); 
img.src = fullPath; 
var width = img.width; 
alert(width); 
... 

私はFF3.6でそれをテストし、それが動作します。

これが役に立ちます。乾杯。

Answer 2

ありがとうございました。私は正しい方向に指摘しました。以下は、Firefox 5とSafari 5で動作するようになったコードです。これは特にエレガントではありませんが、機能的です。誰かがそれを単純化できるかもしれません。

編集19.07.11： example hereに基づいて、コードを大幅に簡略化しました。しかし私はそれをさらに単純化するためにさらなる仕事をすることができると感じています。

HTML：

<div id="wrapper"> 
    <div id="content"></div> 
</div> 

jqueryの：

jQuery(document).ready(function($) { 

    var images = ['image01.jpg', 'image02.jpg','image03.jpg','image04.jpg','image05.jpg']; 

    $('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#content'); 

    (function($) { 
     $.fn.verticalAlign = function() { 
      return this.each(function(i) { 
       var oh = $(this).height(); 
       var wh = $(window).height(); 
       var middle = (wh - oh)/2; 
       if (middle > 0) { 
        $(this).css('margin-top', middle); 
       } else { 
        $(this).css('margin-top', 0); 
       } 
      }); 
     }; 
    })(jQuery); 

    $(window).load(function() { 
     $("#content").verticalAlign(); 
     var showContent = function() { $('#content').fadeIn(750); }; 
     setTimeout(showContent, 100); 
    }); 

    $(window).bind('resize', function() { 
     $("#content").verticalAlign(); 
    }); 
});