1

カスタムDrupalテーマでレスポンシブな背景スライドショーを作成しようとしています。スライドショーの部分はDrupalのモジュール(ビュー、スライドショー)でカバーされ、画像はCSSによって配置されます。これで、画像を拡大して画面全体に表示する簡単なjQueryコードを作成しました。IEでテストするまでは、すべて問題ないと思っていました。後で、私はより多くの問題を発見しました。だから、ここにあります:

1. In IE9, this code works only on first image, others keep their original sizes. 
2. In IE8 there is no background images at all on the screen. 
3. In Firefox, after a while, browser crash. 

私のこの小さなコードにはおそらくひどく間違っていることがありますが、私は何を見つけることができません:

    $(document).ready(function() {
    stretchBg();
    var windowWidth;
    var windowHeight;
    var imageWidth;
    var ratio;
    var imageHeight;
    function stretchBg() {
    windowWidth = $(window).width();
windowHeight = $(window).height();
$('#background img').each(function() {
  imageWidth =  $(this).attr('width');
  ratio = parseFloat(windowWidth / imageWidth).toFixed(2);
  imageHeight = $(this).attr('height') * ratio;
  if(windowHeight <= imageHeight) {
    $(this).attr('width', windowWidth);
    } else {
    $(this).attr('height', windowHeight);
  }
}); 
    }  
    $(window).resize(function() {
    stretchBg();
    });
    });

注:画像はdisplay:noneプロパティで非表示になっており、読み込まれる前にサイズを取得できないため、画像にはwidth()ではなくattr()を使用しています。

どうもありがとうございました、私はあなたの助けに非常に感謝します。

4

0 に答える 0